DREAMWEAVER 2-UTILISATION DE DREAMWEAVER - Éditeur de site Web MACROMEDIA - Notice d'utilisation et mode d'emploi gratuit

Intitulé	Description
Type de produit	Éditeur HTML et environnement de développement web
Version	Macromedia Dreamweaver 2
Système d'exploitation compatible	Windows et Mac OS
Langages supportés	HTML, CSS, JavaScript, PHP, ASP, et autres
Interface utilisateur	Interface graphique avec mode WYSIWYG et code source
Fonctions principales	Création de sites web, gestion de projets, intégration de bases de données
Outils de maintenance	Outils de validation de code, gestion des fichiers, prévisualisation en direct
Entretien et nettoyage	Aucune maintenance spécifique requise, mise à jour régulière recommandée
Support technique	Documentation en ligne et forums communautaires
Informations générales	Idéal pour les développeurs web débutants et intermédiaires

FOIRE AUX QUESTIONS - DREAMWEAVER 2-UTILISATION DE DREAMWEAVER MACROMEDIA

Comment installer Macromedia Dreamweaver 2 ?

Pour installer Macromedia Dreamweaver 2, insérez le CD d'installation dans votre lecteur, puis suivez les instructions à l'écran. Assurez-vous que votre système répond aux exigences minimales.

Comment créer un nouveau site web dans Dreamweaver ?

Pour créer un nouveau site web, ouvrez Dreamweaver, allez dans le menu 'Site', puis sélectionnez 'Nouveau Site'. Remplissez les informations requises et cliquez sur 'Enregistrer'.

Comment ajouter une image à ma page web ?

Pour ajouter une image, utilisez le menu 'Insertion', sélectionnez 'Image', puis choisissez l'image à insérer depuis votre ordinateur. Ajustez les propriétés selon vos besoins.

Comment prévisualiser mon site web dans un navigateur ?

Pour prévisualiser votre site, utilisez le menu 'Fichier', puis sélectionnez 'Prévisualiser dans le Navigateur'. Choisissez le navigateur de votre choix et cliquez sur 'OK'.

Comment ajouter des liens hypertextes ?

Pour ajouter un lien hypertexte, sélectionnez le texte ou l'image, puis cliquez sur l'icône de lien dans la barre d'outils. Entrez l'URL de destination et validez.

Comment publier mon site web ?

Pour publier votre site, allez dans le menu 'Site', puis sélectionnez 'Publier'. Configurez les paramètres de votre serveur FTP et cliquez sur 'Publier'.

Comment résoudre les problèmes de mise en page ?

Vérifiez les balises HTML et CSS utilisées. Utilisez l'outil de validation de Dreamweaver pour détecter les erreurs et ajustez le code en conséquence.

Comment ajouter des styles CSS à ma page ?

Pour ajouter des styles CSS, allez dans le panneau 'Styles', créez un nouveau fichier CSS, et appliquez les styles aux éléments de votre page selon vos préférences.

Comment insérer des tableaux dans Dreamweaver ?

Pour insérer un tableau, utilisez le menu 'Insertion', sélectionnez 'Tableau', puis définissez le nombre de lignes et de colonnes avant de valider.

Comment sauvegarder mon projet ?

Pour sauvegarder votre projet, allez dans le menu 'Fichier' et sélectionnez 'Enregistrer'. Vous pouvez également utiliser le raccourci Ctrl + S sur Windows ou Commande + S sur Mac.

MODE D'EMPLOI DREAMWEAVER 2-UTILISATION DE DREAMWEAVER MACROMEDIA

Utilisation de Dreamweaver

Marques

Macromedia, le logoMacromedia logo, le logo Made With Macromedia, Authorware, Backstage, Director, Extreme 3D et Fontographer sont des marques déposées, et Afterburner, AppletAce, Authorware Interactive Studio, Backstage, Backstage Designer, Backstage Desktop Studio, Backstage Enterprise Studio, Backstage Internet Studio, DECK II, Director Multimedia Studio, Doc Around the Clock, Extreme 3D, Flash, FreeHand, FreeHand Graphics Studio, Lingo, Macromedia xRes, MAGIC, Power Applets, Priority Access, SoundEdit, Shockwave, Showcase, Tools to Power Your Ideas and Xtra sont des marques commerciales de Macromedia, Inc. D'autres noms de produit, logos, dessins, titres, mots ou phrases mentionnés dans cette publication peuvent être des marques commerciales, des marques de service ou des noms commerciaux de Macromedia, Inc. ou d'autres entités éventuelles enregistrées dans certaines juridictions.

Exonération de responsabilité d'Apple

APPLE COMPUTER, INC. N'OFFRE AUCUNE GARANTIE, EXPRESSE OU TACITE, CONCERNANT LE LOT DE LOGICIELS INFORMATIQUES CI-JOINT, SA COMMERCIALITE NI SON ADEQUATION À UNE TACHE PARTICULIERÉ. L'EXCLUSION DE GARANTIES IMPLICITES ÉTANT ILLICITE DANS CERTAINS ÉTATS, IL SE POT QUE LA CLAUSE D'EXCLUSION CI-DESSUS NE VOUS SOIT PAS APPLICABLE. CETTE GARANTIE VOUS CONFÉRÉ CERTAINS DROITS JURIDIQUES. IL SE POT ÉGÀLEMENT QUE VOUS DISPOSIEZ D'AUTRES DROITS EN FONCTION DE L'ÊTAT OÜ VOUS RÉSIDEZ.

Copyright © 1998 Macromedia, Inc. Tous droits réservés. Les pages de ce manuel ne peuvent pas être copiées, photocopieés, reproduites, tradujtes ni publiées, fût-ce partiellement, sousquelque forme électronique ou informatique que ce soit, sans le consentement écrit préalable de Macromedia, Inc. Part Number ZDW20M100F

Remerciements

Gestion du projet et architecture du contenu : Sheila McGinn

Réduction: Lori Hylan, Corinne Chandler, Denise Lee, Erica Edmonds et Sheila McGinn

Conception multimedia : James Khazar

Ingénierie de l'aide: Lori Hylan

Conception du site didacticiel : Akimbo Design

Ingénierie Java : Eric Harshbarger

Édition : Judy Walthers von Alten et Judy Ziajka

Gestion de production : Gemma Londono

Conception de l'impression et de aide: Noah Zilberberg

Production: Noah Zilberberg et Paul Benkman

Director de localisation : Kristin Conradi

Nous remercions en particulier Margaret Dumas, Paul Madar, Heidi Bauer, nj, Mike Sundermeyer, Jean Fitzgerald, David George, Karen Olsen-Dunn, Peter Fenczik, Karen Catlin, Victor Grigorieff, Scott Richards, Peter von dem Hagen, Keiko Higuchi, Hisami Scott, David Lenoe, Sophie Rollins, Arati Rajesh, Harald Mehlem, Bastian Stein, Sabine Rusam-Hathaway, Gwenhael Jacq, Richard Verdoni et Rubric, Inc.

Première édition : décembre 1998

Macromedia, Inc.

600 Townsend St.

San Francisco, CA 94103

SOMMAIRE

CHAPITRE 1

Introduction. 9

Nouveautés de Dreamweaver 2. 10

Configuration système requise. 12

Installation de Dreamweaver 12

Guide pour les medias d'instructions. 13

CHAPTER 2

Didacticiel 17

Didacticiel-Vue d'ensemble. 17

Définition d'un site local. 20

Modification de la page d'accueil d'Olivebranch 23

Creation d'une mise en page complexe 33

Edition d'un tableau 45

Mise en forme de texte avec des styles personalisés 49

Application d'un modele. 51

Association de comportements à des éléments de page. 61

Ajout d'une série video flash. 64

Vérification du site 66

CHAPTER 3

Prise en main 67

Prise en main - Vue d'ensemble. 67

Paramétrage des préférences. 72

Utilisation de Dreamweaver avec d'autres applications 75

CHAPITRE 4

Creation de documents 77

Creation de documents - Vue d'ensemble. 77

Creation de nouveaux documents HTML. 78

Utilisation de guides visuels pour la conception. 79

Ajout de texte et insertion d'objets 82

Selection d'elements dans la fenêtre Document. 84

Configuration de documents. 86

Choix de couleurs 88

Affichage et edition du contenu de l'EN-TÉTE 90

CHAPITRE 5

Utilisation des modèles 91

Modèles - Vue d'ensemble 91

Creation des modèles 92

Importation et exportation de contenu XML 102

CHAPITRE 6

Planification du site. 105

Planification du site - Vue d'ensemble. 105

Creation d'un site local 106

Creation de liens. 107

Affichage de fichier dans une fenetre Site. 115

Travail avec les fichiers du site 117

Creation de cartes de site. 118

CHAPTER 7

Gestion de site 127

Gestion de site -Vue d'ensemble 127

Définition d'un site. 128

Options de la fenêtre Site 130

Utilisation du système d'archivage et d'extraction de fichiers. 133

Recherche et remplacement. 137

Gestion des liens 145

Test du site 147

CHAPITRE 8

Utilisation de Roundtrip HTML. 153

Roundtrip-Vue d'ensemble. 153

Utilisation de l'inspecteur HTML. 154

Définition de contrôle de format source HTML 155

Nettoyage de documents HTML 159

Correction du code non valide 160

Utilisation d'autres éditeurs HTML 161

Insertion de scripts 164

Insertion de commentaires 165

CHAPTER 9

Formatage du texte 167

Formatage du texte - Vue d'ensemble 167

Formatage du texte avec les balises HTML 168

Creation de listedes. 173

Formatage du texte avec des feuilles de style 174

Conversion des styles CSS en code HTML 182

Vérification de l'orthographe. 184

CHAPITRE 10

Insertion d'images 185

Insertion d'images - Vue d'ensemble. 185

Insertion d'une image 186

Creation d'un effet de survol. 187

Configuration des propriétés d'image 188

Utilisation d'un éditeur d'image externe 192

Creation de cartes graphiques 193

CHAPTER 11

Creation de tableaux 195

Creation de tableaux - Vue d'ensemble. 195

Creation de tableaux 196

Formatage de tableaux. 200

Tri de tableaux 205

Redimensionnement des tableaux et cellules 206

Ajout et retrait de lignes et de colonnes. 207

Copie et collage de cellules 210

CHAPITRE 12

Utilisation des calques 213

Utilisation des calques -Vue d'ensemble. 213
Creation de calques. 214
Utilisation de la palette de calques. 220
Manipulation des calques 220
Déplacement des calques. 223
Modification de l'ordre de superposition des calques. 225
Modification de la visibilité des calques. 225
Utilisation des calques pour conceiveir des tableaux. 226
Conversion des navigateurs de 3.0 à 4.0 229

CHAPITRE 13

Utilisation de cadres 231

Utilisation de cadres - Vue d'ensemble 231
Creation de cadres. 232
Selection d'un cadre ou jeu de cadres. 233
A propos des propriétés de cadre et jeu de cadre 235
Contrôle du contenu d'un cadre au moyen de liens. 239
Creation de contenu sans cadre. 240

CHAPITRE 14

Creation de formulaires 241

Creation de formulaires - Vue d'ensemble. 241
Creation d'un formulaire. 242
Ajout d'un objet à un-formulaire. 243
Traitement des formulaires 244

CHAPITRE 15

Réutilisation des éléments d'une page 247

Réutilisation des éléments d'une page - Vue d'ensemble 247
Utilisation des éléments de la bibliothèque 248
Utilisation des insertions cote serveur 253

CHAPITRE 16

Ajout d'interactivité et d'animation. 257

Ajout d'interactivité et d'animation - Vue d'ensemble. 257

Présentation des comportements 258

Utilisation des comportements livres avec Dreamweaver 263

Animation avec HTML dynamique 286

Ajout d'animations, d'appliquettes et d'autres éléments multimédia . .296

CHAPITRE 17

Personnalisation de Dreamweaver 307

Personnalisation de Dreamweaver - Vue d'ensemble 307

Modifier la palette d'objects et le menu Insertion 308

Modifier le profil du formatage de la source HTML 310

Créer et modifier les profils de navigateur 311

ANNEXE A

Raccourcis clavier. 315

Menu Fichier 315

Menu Edition 316

Éditer du texte 316

Formater du texte 317

Rechercher et remplacer du texte. 318

Travailler avec des tableaux 318

Travailler avec des cadres 319

Travailler avec des calques 319

Travailler avec des scenarios. 320

Travailler avec des images 320

Gérer les hyperliens 321

Cibler et visualiser dans les navigateurs 321

Gestion de site et FTP. 322

Carte du site 323

Lecture des plug-ins 323

Affichage des éléments de page 323

Travailler avec des modèles 324

Insérer des objets 324

Ouvrir et fermer des palettes 324

Obtenir de l'aide 325

INDEX 327

CHAPITRE 1

Introduction

Dreamweaver est un éditeur visuel professionnel pour la création et la gestion de pages web. Avec Dreamweaver, il est facile de créé des pages s'affichtant correctement sur différents types de plates-formes et de navigateurs. La technologie Roundtrip HTML™ de Macromedia imports des documents HTML sans reformater le code.

Dreamweaver rend également possible l'utilisation des fonctions HTML dynamique, telles que les calques animés et les comportements, sans avoir à écrire de ligne de code. La vérification ciblée sur le navigateur est là pour assurer que votre travail s'affiche sans problème sur toutes les plates-formes et tous les navigateurs.

Nouveautés de Dreamweaver 2

Dreamweaver 2 offre plusieurs fonctions qui améliorent votre productivité au cours du développement d'un site web.

Édition de contenu dynamique Facilité et accélère la mise en place et l'accès à votre contenu sur le web.

Utilisez les modèles pour séparer le contenu de la création graphique, permettant ainsi une diffusion plus rapide sur le web. Voir Modèles - Vue d'ensemble, page 91.
Affichez les insertions cote serveur directement dans la fenetre de document. Voir Utilisation des insertions cote serveur, page 253.

Édition au niveau du site Vous aide à gérer des sites importants.

• Créez une carte visuelle et hierarchique du site; utile pourprésenter visuellement vos idées à vos clients, ainsi que pour gérer la structure du site. Voir Création de cartes de site, page 118.
  Pour creer des liens, faites glisser les fichiers, ou pointez simplement vers les fichiers. Voir Creation de liens, page 107.
  Utilisez les outils de gestion de liens pour lesmettre à jour au fur et à mesure que vous déplacez, renommez et supprimez les fichiers. Voir Gestion des liens, page 145.
• Rechercher plusieurs fichiers au niveau du site et effectuez un remplacement global sur votre site.
• Profitez des avantages de la fonction de recherche-remplacement compatible HTML pour localiser des balises et des attributs HTML. Vous pouvez également utiliser des expressions standard pour rendre vos recherches encore plus puissantes. Voir Recherche et remplacement, page 137.

Outils pour les concepteurs graphiques Vous permet de faire participer vos concepteurs graphiques au processus de développement du site.

Utilisez les calques pour la conception de pages complexes et précises en nombre de pixels, puis convertissez-les en tableaux pour creer des pages fonctionnant dans tous les navigateurs. Voir Utilisation des calques pour concevoir des tableaux, page 226.
- Choisissez une couleur n'importe où sur le bureau, et grâce à la palette adaptée au web, placez-la sur la couleur adaptée au web la plus rapprochéée. Voir Choix de couleurs, page 88.
Utilisez un trace d'image pour reconvoir rapidement des pages à partir de la maquette d'un concepteur. Voir Utilisation du trace de l'image, page 81.

Édition de tableau améliorée Facilité la création de tableaux HTML élégants.

Coupez, copiez et collez des cellules, des lignes et des colonnes multiples aissement. Voir Copie et collage de cellules, page 210.
- Sélectionnez plusieurs cellules d'un tableau et modifierez leurs propriétés facilement. Voir Sélection d' éléments de tableau, page 198.
- Fractionnez n'importe chaque cellule de tableau en plusieurs cellules. Voir Fractionnement et fusion de cellules, page 208.
- Formatez rapidement les tableaux avec des conceptions graphiques prédéfinies. Voir Formatage d'un tableau à l'aide d'une mise en forme prédéfinie, page 204.
- Triez les tableaux par ordre numérique et alphabetique, par colonne ou par ligne. Voir Tri de tableaux, page 205.

Fonctions de Productivité améliorées Vous permet de travailler plus intelligemment et plus rapidement.

• Personnalisez votre espace de travail en combinant les palettes et les inspecteurs en une unique palette à ontlets. Voir Utilisation des palettes flottantes ancrables, page 72.
• Redimensionnez la fenêtre de document instantanément, pour prédéfinir ou personnaliser les dimensions. Voir Redimensionnement de la fenêtre Document, page 80.
  Utilisez les menus de raccourci pour acceder rapidement aux commandes que vous utilisez le plus souvent. Voir Utilisation des menus contextuels, page 71.
  Affichez et manipulez le contentu de la section HEAD dans la fenetre de document. Voir Affichage et edition du contentu de l'EN-TÉTE, page 90.
• Execuéz les plug-ins directement dans la fenêtre de document de Dreamweaver. Voir Lecture du plug-in dans la fenêtre du document, page 301.

Un environnement extensible Vous permet de personneliser et d'etendre Dreamweaver pour qu'il corresponde à votre façon de travailler. Voir Extending Dreamweaver overview.

Utilisez les commandes pour modifier le document courant, par exemple pour trier un tableau ou nettoyer votre code source HTML.
Écrire vos propres commandes comme s'il s'agissait d'objects ou d'actions.
- Donnez une représentation visuelle aux balises personnalisées dans la fenêtre de document et creez des inspecteurs de propriétés pour définir rapidement leurs propriétés.
Écrirez vos propres traducteurs de données pour afficher les résultats de traitement du serveur dans la fenêtre de document.

Configuration système requise

Le matériel et les logiciels suivants sont requis pour l'exécution de Dreamweaver :

Pour Microsoft WindowsTM :

Proesseur Intel Pentium® 90 ou équivalent tournant sous Windows 95, Windows 98 ou Windows NT version 4.0 ou plus récente.
16 Mo de mémoire vivie (RAM) plus 20 Mo d'espace disque disponible.
Moniteur couleur capable d'une résolution de 800× 600 pixels.
Lecteur CD-ROM.

Pour Macintosh®:

Power Macintosh sous MacOS 7.5.5 ou supérieur.
24 Mo de RAM plus 20 Mo d'espace disque disponible.
Moniteur couleur capable d'une résolution de 800 × 600 pixels.
Lecteur CD-ROM.

Installation de Dreamweaver

Suívez les étapes suivantes pour installer Dreamweaver sur un ordinateur Windows ou Macintosh.

Pour installer Dreamweaver :

1 Insérez le CD de Dreamweaver dans le lecteur de CD-ROM.
2 Choisissez une des options suivantes :
Sous Windows,CHOISSEZDemarrer > Executer.Cliquez ensuite sur Parcourir et choisissez le fjichier Setup.exe sur le CD de Dreamweaver.Cliquez sur OK dans la boite de dialogue Executer pour commencer l'installation.
Sur le Macintosh, double-cliquez sur l'icone Installation de Dreamweaver.
3 Suivez les instructions affichées à l'écran.
4 Redemarrez votre ordinateur si nécessaire.

Guide pour les medias d'instructions

Le kit Dreamweaver contient toutes sortes de medias pour vous aider à apprendre le programme rapidement et à开发商 compétent dans la création de pages Web : pages d'aide HTML en ligne qui apparaissent dans votre navigateur, animations Montrez-moi, un didacticiel, un manuel imprimé et un site web régulièrement mis à jour.

Didacticiel de Dreamweaver

Le didacticiel de Dreamweaver est idéal pour commencer, si vous experience en matière de création de sites web est minimale. Ce didacticiel vous montre comment éditer un réseau de site web à l'aide de quelques-unes des fonctions les plus utiles et les plus puissantes de Dreamweaver. Vous le trouvez à la fois dans l'Aide de Dreamweaver et dans le manuel Utilisation de Dreamweaver.

Visite guidée et animations Montrez-moi

La visite guidée et les animations Montrez-moi dans les pages d'aide HTML sont une introduction animée des fonctions-clés. La visite guidée inclut toutes les animations Montrez-moi en sequence. Vous pouvez également voir les animations Montrez-moi individuellement dans leur section de presentation respective.

Cette icône indique qu'une rubrique contient une animation Montrez-moi.

Les animations Montrez-moi nécessitent le plug-in Shockwave Director, qui est inclus sur le CD de Dreamweaver. Si vous avez acheté votre copie de Dreamweaver électroniquement, vous pouvez télécharger plug-in de Shockwave le plus récent à partir du site web de Macromedia à http://www.macromedia.com/shockwave/download/.

Dreamweaver HTML Help Pages™

Dreamweaver HTML Help Pages™ fournit des informations détaillées sur toutes les fonctions de Dreamweaver. Pour enrichir votre experience, nous vous recommendons vivement d'utiliser l'un de ces navigateurs :

Sous Windows, nous vous recommendons Netscape Navigator 4.0 ou plus récent ou Microsoft Internet Explorer 4.0 ou plus récent.
Sur Macintosh, nous vous recommendons Netscape Navigator 4.0 et plus recent (Internet Explorer pour Macintosh n'est pas recommendé car il ne peut pas jouer les animations Montrez-moi).

Si vous utilisez un navigateur 3.0, tout le contenu sera disponible, mais certaines fonctions, (telles que Rechercher) ne fonctionneront pas.

Les pages d'aide HTML de Dreamweaver utilisent JavaScript à outrance. Assurez-vous que JavaScript est activé dans votre navigateur. Si vous prévoyez d'utiliser la fonction Rechercheur, assurez-vous aussi que Java est activé.

Table des matières Utilisez la table des matieres pour consulter toutes les informations organises par sujet. Cliquez sur les entrées principales pour afficher les sous-rubriques.

Index Utilisez l'index comme un index imprimé, pour trouver des termes importants et vous rendre aux rubriques associées.

Rechercher Utilisez Rechercher pour trouver une chaine de caractères dans tout le texte de la rubrique. La fonction de recherche nécessite un navigateur 4.0 avec Java activé.

Pour rechercher une phrase, il vous suffit de la taper dans la zone de texte.

Pour rechercher des fichiers contenant deux mots-clés, (par exemple, calques et styles), séparez les termes de la recherche par un signe plus (+).

Liens contextuels Cliquez sur le bouton d'aide de n'importe qu'elle boite de dialogue ou sur le point d'interrogation des inspecteurs, des fenêtes et des palettes pour ouvrir la rubrique d'aide correspondante.

Barre de navigation Utilisez les boutons de la barre de navigation pour vous déplacer dans les rubriques.

Retour et Avance fonctionnent comme les boutons Précédente et Suivante du navigateur, vous ramenant ainsi à des rubriques que vous venez de consulter.

Précédente et Suivante appelant la rubrique précédente ou suivant d'une section (suivant l'ordre des rubriques listedes dans la table des matières).

• Nouveautés lie au centre de développement de Dreamweaver sur le site web de Macromedia.

Centre de développement de Dreamweaver

Le site web du centre de développement de Dreamweaver est régulièrement mis à jour avec les dernières informations sur Dreamweaver, et contient également des conseils d'experts, des informations sur les rubriques de pointe, des exemples, des conseils et des mises à niveau. Vérifiez souvent ce site pour obtenir les dernières nouvelles sur Dreamweaver et pour apprendre comment比较好 utiliser ce programme à l'adresse

Utilisation de Dreamweaver

Le manuel Utilisation de Dreamweaver vous présente le programme de Dreamweaver et contient une version condensée de l'Aide de Dreamweaver, sans certaines informations de referencia sur les options du programme.

CHAPITRE 2

Didacticiel

Didacticiel - Vue d'ensemble

Ce didacticiel explique comment utiliser Dreamweaver pour modifier et partager à jour un site web.

Dans le cadre de ce didacticiel, vous allez modifier le site web d'une société fictive, Olivebranch Gourmet Foods, exploitation agricole qui commercialise des produits alimentaires pour gourmets.

Lorsqu'ils visitent le site web d'Olivebranch, les clients peuvent dire une presentation des spécialités du jour et parcourir le catalogue en ligne des vins, fromages, huiles et autres condiments. Ils ont également la possibilité de s'informer sur Oliveira branch et les événements que cette société parraine.

Vous allez apprenda accomplir les taches suivantes :

Affichage des pages dans un navigateur
Definition d'un site local
Definition des propriétés d'une page telles que l'arrière-plan et les couleurs des liens
Creation d'une carte du site
Creation de liens
Création d'une mise en forme à l'aide de calques, et conversion de ceux-ci en tableaux
Utilisation d'un nouveau trace de l'image
Edition d'un tableau
Mise en forme du texte à l'aide de styles
Application d'un modele
Liaison de comportements
Insertion d'une série video flash

Remarque: Ce didacticiel montre certaines fonctions prises en charge uniquement par les navigateurs de version 4.0 ou ultérieure.

Visite guidée de Dreamweaver

Avant de commencer, regardez les séquences video de la visite guidée figurant dans les pages d'aide afin de vous familiariser avec les fonctions de Dreamweaver.

Pour afficher les séquences video :

1 Dans Dreamweaver, choisissez Aide > Rubriques d'aide de Dreamweaver.
2 Dans le cadre de gauche de la liste du sommaire, cliquez sur Introduction, puis sur Visite guidée de Dreamweaver.
3 Cliquez sur Afficher pour assister à la visite guidée.
4 Fermez le navigateur lorsqu vous avez terminé.

Affichage du site web achevé

Consultez ensuite le site web acheve pour vous faire une idee de ce vers quoi vous allez.

Pour afficher le site Olivebranch acheve :

1 Dans Dreamweaver, choisissez Fichier > Ouvrir. Naviguez jusqu'au repertoire de l'application Dreamweaver, puis ouvre successivement les repertoires Tutorial et Olivebranch_site.
2 Dans Olivebranch_site, cliquez sur le fichier index.htm pour ouvrir la page d'accueil d'Olivebranch dans la fenetre Document.

Ne modifies pas cette page car elle est déjà terminée. Vous allez en modifier une autre version.

3 Choisissez Fichier > Aperçu dans le navigateur, puis sélectionnez un navigateur pour afficher la page d'accueil d'Olivebranch (choisissez un navigateur version 4.0 pour afficher ce site).

Remarque: L'application Flash Player doit être installée dans votre navigateur par défaut pour pouvoir afficher les communiqués spéciaux de la semaine figurant sur la page d'accueil d'Olivebranch. Si vous ne disposez pas de cette application, repérez son logiciel d'installation dans le réseau Flash du CD de Dreamweaver, ou téléchargez-le sur le site http://www.macromedia.com/shockwave/download/.

4 Faites glisser le curseur de la souris successivement sur les quatre éléments situés dans la partie gauche de la page (about, events, etc.); notez que ces éléments s'affichent en surbrillance pour indiquer qu'il s'agit de liens actifs. Cliquez sur n'importe lequel de ces éléments pour explorer les pages correspondantes.

Remarque: La section gift basket de ce site n'est pas utilisé.

5 Fermez le navigateur lorsque vous avez fini d'examiner le site.

Organisation des fichiers du didacticiel

Les fichiers HTML, tant achèvés qu'inachevés, utilisés dans ce didacticiel se trouvent dans le sous-repertoire Olivebranch_site du repertoire Tutorial. Les images et autres fichiers associés pour le site se trouvent dans les sous-repertoires du repertoire Olivebranch_site (le chemin d'accès complet du repertoire Olivebranch_site varie en fonction de l'emplacement où Dreamweaver 2.0 a été installé).

Chaque fjichier porte un nom significatif (en angeais) - par exemple, le fjichier HTML correspondant à la page ou sont presentés les événements parrainés par Olivebranch s'applée events_main.htm. Les fjichiers inachevés sur lesquels vous allez travailler portent des noms identiques à ceux qui leur sont attribués dans le site acheve, à l'exception du préfixe DW2_. Par exemple, la version inachevée de la page events_main.htm, s'applé DW2_events_main.htm.

Définition d'un site local

Pour travailler avec Dreamweaver, vous devez commencer par创建工作 un site local. Ce dernier définit la structure des pages que vous allez créé.

Un site est un emplacement où vous allez stocker l'ensemble des documents et des fichiers apparanten à un site web. Un site local requiert un nom et un réseau racine local indiquant à Dreamweaver l'emplacement où vous souhaitez conserver les fichiers du site. Vous doivent creer un site local pour chaque site web sur lequel vous travailliez.

Dans le cadre de ce didacticiel, vous allez spécifique le réseau Oliveirabranch_site comme réseau du site local.

Pour creer un site local :

1 Dans Dreamweaver, ouvre la boite de dialogue Definition du site en procédant comme suit :
Sur Macintosh,choisissez Site > Nouveau site.
Sous Windows, choisissez Fichier > Nouveau Site.
2 Dans la boite de dialogue Définition du site, vérifie si l'optionInfos locales est selectionnée dans la liste Catégorie.
3 Nommez le site My_Tutorial en tapant ce nom dans le champ Nom du site. Le nom du site local est un surnom qui renvoie directement au repertoire défini comme site local.
4 Cliquez sur l'icone de repertoire à droite du champ Dossier racine local et naviguez jusqu'au repertoire Olivebranch_site, puis cliquez sur Enregister.

Remarque: Le chemin d'accès complet du réseau Oliveira branch_site varie en fonction de l'emplacement où Dreamweaver 2.0 a été installé.

5 Cliquez sur OK, puis sur Creer lorsque Dreamweaver vous demande si vous voulez creer un fjichier cache pour le site.

L'option de création d'un fjichier cache dans le réseau Olivebranch_site permet de creer un enregistrement des fjichiers existants de manière à ce que Dreamweaver puisse rapidementmettre les liens à jour lorsque vous déplacez, renommez ou supprimez un fjichier.

La fenêtre du site affiche une liste de tous les repertoires et fischiers contenus dans le site local My_Tutorial. La liste fait également office de gestionnaire de fischiers, en vous permettant de copier, coller, supprimer, déplacer et ouvrir des fischiers exactement comme dans le sélecteur de fisquier ou l'explorateur de l'ordinateur.

6 Fermez la fenetre Document contenant le fichier index.htm, mais laissez la fenetre du site ouverte.

Modification de la page d'accueil d'Olivebranch

Vouaves a present defini une structure pour le site Olivebranch que vous etes en train de creer. Ouvrez la version inachevee de la page d'accueil. Vous allez creator des liens etCHOISIR une couleur d'arriere-plan, une image d'arriere-plan et un titre pour la page de maniere a ce qu'elle presente le meme aspect que la page d'accueil d'Olivebranch terminée.

Pour ouvrir la page d'accueil inachevee dans Dreamweaver :

1 Dans la fenêtre du site, double-cliquez sur DW2_index.htm.

2 Fermez la fenetre du site.

Définisse la couleur et l'image d'arrière-plan

Si vous utilisez une image et une couleur d'arrière-plan, la couleur s'affiche pendant le téléchargement de l'image, ce qui confère à la page un aspect plus attrayant pour les utilisateurs attendant le téléchargement de l'image. Si l'image d'arrière-plan comprend des pixels transparents, la couleur d'arrière-plan filtre.

Pour définir une couleur d'arrière-plan pour la page :

1 Choisissez Modifier > Propriétés de la page pour ouvrir la boîte de dialogue Propriétés de la page.
2 Changez la couleur d'arrière-plan par défaut en tapant #FFFFFFC dans le champ Couleur d'arrière-plan.

Dans ce cas, vous savez précisément la couleur que vous voulez. Vous pouvez également désirir une couleur dans la palette ou utiliser le compte-gouttes pour sélectionner une couleur d'un objet de la page.

3 Cliquez sur Appliquer pour appliquer la couleur à l'arrière-plan.

Dès que vous avez cliqué sur Appliquer dans la boîte de dialogue Propriétés de la page, la page est mise à jour dans la fenêtre Document.

Spcificiez ensuite une image d'arriere-plan pour la page.

Pour définit une image d'arrière-plan pour la page :

1 Cliquez sur Parcourir (Windows) ou Choisisr (Macintosh) à côté du champ Image d'arrière-plan.
2 Sélectionnez home bg.jpg dans le sous-repertoire Assets du repertoire Oliveira branch_site.

3 Cliquez sur Appliquer pour ajouter l'image d'arriere-plan à la page.
4 Laissez provisoirement la boîte de dialogue Propriétés de la page ouverte. Une fois la couleur et l'image d'arrière-plan en place, la page d'accueil sur laquelle vous travailliez devrait avoir l'aspect suivant :

Définissez le titre de la page

Le titre d'une page HTML aide les utilisateurs à conserver la trace de ce qui s'affiche en cours de navigation ; il identifie aussi la page dans les listes de l'historique et des signets. Si vous n'attribuuez pas de titre à la page, elle apparaître dans la fenêtre du navigateur et dans les listes de signet et de l'historique comme Document sans titre.

Pourdéfinir letitre d'unepage：

1 Dans le champ Titre de la boîte de dialogue Propriétés de la page, tapez Olivebranch Gourmet Foods pour nommer la page d'accueil, puis cliquez sur OK.

La barre de titre actualisée affiche le nom que vous avez donné au fjchier.

2 Choisissez Fichier > Enregistrer pour enregistrer les changements apportés.

Création d'une carte du site

Une carte du site est une représentation visuelle précise de la structure d'un site. Vous pouvez également utilisez la carte du site pour ajouter de nouveaux fichiers, ajouter, supprimer ou modifier des liens, et pour creer une image BMP ou PICT du site que vous pourrez exporter vers une application d'edition d'ou vous l'imprimerez.

La page d'accueil d'un site apparait toujours en haut de la carte du site. Sous la page d'accueil, s'affichent les fischiers auxquels ses liens revoient. Si le repertoire que vous définissez comme racine du site contient un fisquier nommé index.htm,

Dreamweaver utilise automatiquement ce dernier comme page d'accueil à la base de la carte du site. Du fait que la page d'accueil du site My_Tutorial s'appeille en réalité DW2_index.htm, vous la redéfiniriez en personnelisant l'aspect de la carte du site.

Pour creer une carte du site :

Dans la fenêtre du site, appuyez et maintenez enforcée l'icone Carte du site dans le coin supérieur gauche, puis selectionnez Carte et fichiers dans le menu déroulant.

La fenêtre du site affiche à présent deux vues du site local : à gauche, apparait la structure arborescente de la carte du site Olivebranch achéve (avec la page d'accueil index.htm) et, à droite, la liste de fichiers utilisée précédemment.

Redéfinissez à partir la page d'accueil de manière à ce que le site utilise la version du didacticiel au lieu de la version achèvee.

Pour redéfinir la page d'accueil et personnelier l'aspect de la carte du site :

1 Ouvrez la boîte de dialogue Définition du site en procédant comme suit :
Sous Windows,CHOISSEs Affichage Mise en page dans la barre de menus de la fenetre du site.
Sur Macintosh, choisissez Site > Affichage de carte de site > Mise en page.
2 Sélectionnez Mise en forme de la carte du site dans la liste Catégorie de la boîte de dialogue Définition du site.
3 Spécifiez la nouvelle page d'accueil du site en cliquant sur le réseau du filchier à côté du champ Page d'accueil, puis en navigant vers le filchier DW2_index.htm se trouvant dans le sous-repertoire Olivebranch_site du réseau Tutorial.
Fixez la valeur du champ Nombre de colonnes à 3.

5 Cliquez sur OK pour fermer la boite de dialogue Définition du site et revenir à la fenêtre du site.

La carte du site est actualisée de manière à reflérer le changement apporté, la page d'accueil du didacticiel étant à présent à la racine de la structure arborescente de la carte du site.

En ce moment précis, la page d'accueil du didacticiel ne contient qu'un seul lien. Vous allez bientôt y ajouter d'autres liens.

6 Laissez provisoirement la fenêtre du site ouverte afin de pouvoir constater la manière dont le site s'actualise à mesure que vous ajoutez des liens à la page d'accueil.

Creation de liens

Les images s'affichant dans la colonne de gauche de la page d'accueil guident les visiteurs à travers le site d'Olivebranch. L'image du haut, intitulée about, établit déjà un lien vers la page appropriée du site. Vous allez ajouter des liens à deux autres éléments graphiques, events et catalog, de manière à ce qu'ils renvoient également à d'autres pages du site (vous ne toucherez pas à l'image gift basket).

Commencez par ajouter un lien du graphique events vers la page Events à l'aide de l'inspecteur de propriétés.

Pour creer un lien à l'aide de linspecteur de propriétés :

1 Cliquez sur la barre de titre de la fenetre Document contenant le fisquier DW2_index.htm pour l'activer ou selectionnez le nom du fisquier dans le menu Fenetre.
2 Dans la fenêtre Document, cliquez sur l'image events pour la selectionner.

Remarque: Si vous double-cliquez sur l'image, Dreamweaver vous invitera à selectionner un autre fisier pour replacer l'image.

3 Choisissez Fenêtre > Propriétés pour ouvrir l'inspecteur de propriétés. L'inspecteur de propriétés affiche des informations sur l'image sélectionnée.

4 Dans l'inspecteur de propriétés, cliquez sur l'icone de répertoire située à côte du champ Lien vide.
5 Dans la boîte de dialogue Sélectionner fischiér HTML, naviguez vers le réseau Olivebranch_site, Sélectionnéz DW2_events_main.htm, puis cliquez sur Sélectionner.

Le nom du fjichier avec lequel vous établissez un lien s'inscrit dans le champ Lien de l'inspecteur de propriétés.

Vous allez à présent ajouter un lien à l'objet graphique catalog en utilisant l'inspecteur de propriétés et la fenêtre du site.

Pour creer un lien à l'aide de l'inspecteur de propriétés et de la fenetre du site :

1 Cliquez sur la barre de titre de la fenêtre du site pour la rendre active, ouCHOisissez Fenetre > Fichiers du site.
2 Le cas échéant, redimensionnéz la fenêtre du document de manière à pouvoir afficher la partie gauche de la fenêtre du document et la fenêtre du site côté à côte.

3 Cliquez sur l'image catalog pour la selectionner dans la fenetre du document.

4 Dans l'inspecteur de propriétés, faites glisser l'icone Pointer vers un fjichier (située à côté du champ Lien) vers la fenêtre du site en pointant sur le fjichier DW2_cat_main_index.htm.

Le chemin d'accès complet du fichier s'inscrit dans le champ Lien de l'inspecteur de propriétés pour l'image catalog.

Dès que vous relâchez le bouton de la souris, la carte du site actualisé reflète le lien que vous venez d'ajouter.

Un signe plus (Windows) ou une flèche d'agrandissement (Macintosh) à côté d'un élément de la carte du site indique que d'autres éléments y sont associés. Cliquez sur le signe plus ou la flèche d'agrandissement pour développer la structure arborescente afin d'afficher les éléments associés ; cliquez sur le signe moins (-) ou sur la flèche d'agrandissement pour réduire l'affichage de la carte du site.

5 Fermez l'inspecteur de propriétés, mais laissez provisoirement la fenêtre du site ouverte.
6 Choisissez Fichier > Enregistrer pour enregistrer les changements apportés à la page d'accueil.
7 Choisissez Fichier > Fermer pour fermer la page.

Création d'une mise en page complexe

Tout comme pour la page d'accueil d'Olivebranch, il existe un fjichier didacticiel concernant la page About Us déjà entamé. Vous allez achieve de compléter la page de didacticiel About Us, de façon à ce que sa mise en forme corresponde à celle de la version achievée.

Vou allezCOMMencer par ouvrir la version achievee de la page About Us dans un navigateur, de maniere a pouvoir vous y referrer en cours de travail.

Pour afficher la page About Us achevée dans un navigateur :

1 Choisissez Fichier > Ouvrir, puis selectionnez about_main.htm dans le sous-repertoire Olivebranch_site du repertoire Tutorial.

Ne modifiez pas cette page car elle est deja terminée.

2 Choisissez Fichier > Aperçu dans le navigateur, puis Sélectionnez un navigateur version 4.0.

Laissez la fenêtre du navigateur ouverte à l'arrière-plan de manière à pouvoir vous y reférer ultérieurement.

3 Dans Dreamweaver,CHOISSEF Fichier > Fermer pour fermer la fenetre du document contenant la page About Us achevee.

Ouvrez à présent le fjichier didacticiel About Us inacheve pour le modifier dans Dreamweaver.

Pour ouvrir le fjichier About Us inacheve dans Dreamweaver :

Dans la fenêtre du site de Dreamweaver, double-cliquez sur le fichier DW2_about_main.htm.

Conversion d'un tableau en calques

Les tableaux sont très utiles pour creer des mises en page complexes. Ils sont pris en charge par les navigateurs de versions 3.0 et 4.0. Les calques sont encore plus utiles pour creer des mises en page complexes du fait qu'ils permettent de déplacer aisément les divers éléments d'une page en faisant simplement glisser les calques sur lesquels ils se trouvent. Les calques ne sont en revanche par pris en charge par les navigateurs de la version 3.0.

Dreamweaver yous permit de tirer parti des meilleures fonctions de tableaux et de calques en passant rapidement d'un mode à l'autre jusqu'à ce que la page ait l'aspect youlu. Le résultat, en format tableau, aura le même aspect dans les navigateurs de version 3.0 et 4.0.

La page About Us a ete entamee avec un tableau pour la mise en forme. Commencez par convertir les cellules du tableau existantes en calques.

Pour convertir les cellules du tableau en calques:

1 Choisissez Modifier > Mise en forme > Repositionner le contenu à l'aide des calques.
2 Dans la boite de dialogue qui s'affiche, désactivez les options Afficher la grille et Aligner sur la grille, en laissant les autres options activées.

L'option Aligner sur la grille oblige les calques à s'aligner sur l'emplacement de grille le plus proche lorsque vous les creez ou les modifiez. Bien que cela facilitite l'alignement des calques, cela vous empêche aussi de les déplacer librement sur la page comme vous alze devoir le faire.

3 Cliquez sur OK pour fermer la boite de dialogue et convertir les cellules du tableau en calques.

Les cellules du tableau deviennent des calques et la palette de calques s'affiche pour vous aider à retrouver tous les calques de la page en cours.

Ajout d'un tracé d'image pour guider la mise en forme

Voussouspoucezutiliser comme guide pour creer une page web un traced'imageJPG, GIF ou PNG que yous aurez prealablement dessiné dans une application graphique.Ce trace de l'imagesert de guide en ariere-plan pour la mise en forme d'une page dans la fenetre Document. Youssusiliezeceltraceofl'imagepour positionner les calques dans le document About Us de manierea ce que le dessin de la page corresponde au trace de l'imagesitue en-dessous.

Pour charger un trace d'image :

1 Choisissez Affichage > Trace de l'image > Charger.
2 Sélectionnez about_us_comp.gif dans le réseau Assets, puis cliquez sur Sélectionner.
3 Dans la boîte de dialogue Propriétés de la page, utilisez le curseur Transparency de l'image pour régler l'opacité du trace d'image sur 50% .

Le réglage du niveau de transparence sur 50% fait que le trace d'image apparait décoloré dans la fenêtre Document, ce qui vous aide à faire la distinction entre le trace de l'image et les éléments modifiables de la page.

4 Cliquez sur OK pour ajouter le trace de l'image et fermer la boîte de dialogue. Un trace de l'image s'affiche dans l'espace de travail, avec les calques existants posés dessus, bien que non alignés sur le trace (si le trace de l'image n' apparait pas, assurez-vous que l'option Afficher est activée lorsque vous désissez Affichage > Tracé de l'image > Afficher).

Lorsque vous chargez un trace d'image, l'image et la couleur d'arrière-plan ne sont pas visibles dans la fenêtre Document mais elles apparaitront lorsque vous afficherez la page dans un navigateur.

Le trace de l'image n'est lui-même visible que lorsque vous modifie la page dans la fenêtre Document ; il n'apparait jamais dans un navigateur.

Positionnement des calques

Déplacez les calques créés hors du tableau de manière à ce qu'ils soient alignés sur les éléments du trace de l'image et en reproduisent l'aspect.

Pour positionner les calques sur la page :

1 Cliquez sur le bord du calque contenant le texte sur Olivebranch pour le selectionner.

Voici ce à quoi ressemble un calque sélectionné :

2 Saisissez la poignée du calque et faites-le glisser (ou utilisez les touches fléchéées) au-dessus du texte générique du tracé de l'image. Redimensionné éventuèlement le calque de manière à ce que sa taille corresponde à cette du bloc de texte du tracé de l'image.

Du fait que les deux blocs contiennent un texte différent, les mots du calque ne sont pas parfaitement alignés sur ceux du tracé de l'image dans l'espace de travail. Toutefois, étant donné que le tracé de l'image ne s'affiche que dans l'espace de travail, le texte du calque du document s'affiche normalement dans un navigateur.

3 Procedez de mesmo pour placer le calque contenant la dette O au-dessus de la dette O du tracé de l'image.

Ajout de nouveaux calques

Ajoutez à présent des calques correspondant aux parties du tracé de l'image non encore affichées sur la page.

Pour ajouter de nouveaux calques à une page :

1 Cliquez sur une zone vierge de la fenetre Document.
Assurez-vous que le curseur ne pointe pas sur un calque existant afin d'éviter de creer des calques imbriqués impossibles à convertir en tableaux.
2 Choisissez Insertion > Calque pour ajouter un nouveau calque à la page.
3 Positionnez le calque sur la zone carrée du tracé de l'image libellée "Diana close-up photo".

L'option Empêcher le chevauchement étant sélectionné dans la palette de calques, il est impossible de superposer les calques. Il se peut que vous deviez redimensionner le calque pour le faire glisser dans une position où il ne chevauche pas un autre calque.

4 Sélectionnez le calque et redimensionnéz-le, en fonction de vos besoin, pour qu'il corresponde à la zone du trace de l'image.

5 Répétez ces étapes pour ajouter d'autres calques à la page, au-dessus des zones du trace de l'image libellées "Farm photo (with daughter)" et "Tree photo".

Ajout d'images

Insérez à présent des éléments graphiques dans chaque calque, puis alignez-les sur le trace de l'image.

Pour insérer des éléments graphiques dans les calques et les aligner sur le trace de l'image :

1 Cliquez une fois dans le calque "Diana close-up photo" pour y placer le curseur sans le sélectionner.

Voici à quoi ressemble un calque actif dans lequel un curseur est positionné :

2 Choisissez Insertion > Image, puis Sélectionnez about_diana.jpg dans le réseau Assets pour ajouter l'image au calque.

3 Une fois que l'image apparait dans le calque, cliquez sur la cordure du calque pour le selectionner, puis utilisez les touches flechées pour aligner l'élément graphique sur le trace de l'image (si nécessaire, redimensionnéz de nouveau le calque pour qu'il corresponde plus précisément au trace de l'image).

Avant

Après

4 Repetez ces étapes en ajoutant l'image about_daughter.jpg du repertoire Assets au calque "Farm photo (with daughter)" et l'image about_tree.jpg du repertoire Assets au calque "Tree photo".

5 Fermez la palette de calques.

Conversion des calques en tableau

Aprésent que vous avez mis la page en forme exactement comme vous le vouliez, convertisse les calques en tableau de manière à ce que la page s'affiche parfaitement dans les navigateurs de version 3.0 aussi bien que de version 4.0.

Pour convertir tous les calques en un simple tableau :

1 Choisissez Modifier > Mise en forme > Convertir les calques en tableau.
2 Cliquez sur OK pour accepter les options par défaut dans la boîte de dialogue. Convertir les calques en tableau.

Dreamweaver ne peut pas creer un tableau à partir de calques se chevauchant ; c'est pour cela que vous avez utilisé l'option Empêcher le chevauchement pour contraindre le positionnement des calques lors de leur creation à partir du tableau original.

Affichage de la page dans un navigateur

Affichez à présent la page About Us que vous venez d'editor.

Pour afficher la page dans un navigateur :

1 Appuyez sur F12 pour afficher le document dans le navigateur web par défaut. Vous ne doivent pas enregistrer un document avant de l'avoir prévisualisé. Toutes les fonctions de navigation sont opérationnelles lorsque vous prévisualisez un document.

2 Comparez le fjchier sur lequel vous venez de travailler à la page About Us achevee que vous avez chargée préalablement dans le navigateur.
3 Lorsque vous avez fini de prévisualiser le fichier, fermez les deux fenêtres du navigateur.
4 Revenez dans Dreamweaver etCHOISSEF Fichier > Enregister pour enregister les changements apportés à la page About Us.
5 Choisissez Fichier > Fermer pour fermer la page.

Edition d'un tableau

La page Oliveirabranch Events affiche une liste de concerts, expositions et festivals parrainés par Oliveirabranch. Les événements apparaissent dans un tableau décrivant l'emplacement, la date et la nature de chacun d'eux.

Le fichier didacticiel de la page Events contient un tableau complet des événements. Vous allez modifier ce tableau en déplaçant des colonnes et en triant les informations continues dans les cellules.

Pour ouvrir la page Events du didacticiel :

1 Dans la fenêtre du site, double-cliquez sur DW2_events_main.htm.

Si vous ne VOYZ pas la fenetre du site, choisissez Fenetre > Fichiers de site pour l'ouvrir ou l'activer.

Voici l'aspect du tableau de la page :

2 Laissez la fenetre du site ouverte mais faites-la passer à l'arrière-plan.

Mise en forme du tableau

Déplacez la colonne Where dans la partie droite du tableau vers la gauche afin d'en faire la première colonne.

Pour déplacer des colonnes dans un tableau :

1 Cliquez sur la cellule Where en haut de la colonne, puis faites glisser le pointeur de la souris vers la dernière cellule de la colonne pour la selectionner entiement.

Vous pouvez également sélectionner une colonne en positionnant le pointeur de la souris précisé sur la cordure supérieure de la colonne, sans cliquer, jusqu'à ce qu'une flèche de selection s'affiche ; cliquez ensuite une fois pour sélectionner toute la colonne (si vous positionnez le pointeur sur la cordure du tableau, vous sélectionnerez tout le tableau).

2 Choisissez Édition > Couper.
3 Cliquez à l'intérieur de la cellule When (ne la seLECTIONnez pas).
4 Choisissez Édition > Coller.

La colonne Where est a present la première colonne du tableau.

Triez ensuite les cellules du tableau par ordre alphabetique, par emplacement.

Pour trier les cellules d'un tableau :

1 Clique n'importe ou dans le tableau, puis choisissez Commandes > Trier le tableau.
2 Dans la boîte de dialogue Trier le tableau, spécifie les options suivantes :
Trier par : colonne 1
Ordre:Alphabétique croissant
Puis par : colonne 2
Ordre: Numérique croissant

Le premier tri (Trier par) trie le tableau par ordre alphabetique, ennant en considération le contenu de la première colonne. Le second tri (Puis par) trie le tableau par ordre numérique, ennant en considération le contenu de la deuxieme colonne.

3 Cliquez sur OK pour trier le tableau.

Voulez à présent formater le tableau en centrant le contenu des cellules dans la colonne When.

Pour centrer le contenu des cellules du tableau :

1 Cliquez sur la première cellule sous le titre de la colonne When, puis faites glisser le curseur jusqu'au bas du tableau de maniere à selectionner toutes les cellules de la colonne.
2 Choisissez Modifier > Propriétés de la seLECTION pour ouvrir l'inspecteur de propriétés.
3 Si vous ne VOYEZ pas de menu Horz dans l'inspecteur de propriétés, cliquez sur la flèche d'agrandissement dans le coin inférieur droit pour afficher une liste de propriétés complète.

4 Choisissez Centrer dans le menu Horz.

Le contenu de toutes les cellules de la colonne When est centré.

Mise en forme de texte avec des styles personnalisés

Un style est un groupe d'attributs de mise en forme contrôlant l'apparace d'un bloc ou d'une page de texte. Une feuille de style inclut tous les styles d'un document.

Creez un style personnelisé pourmettre en forme les titres de tableau de la page Events.

Pour creer un style personnalise :

1 Choisissez Fenetre > Styles pour ouvrir la palette des styles.
2 Cliqueur Editor pour ouvrir la boite de dialogue Editor Feuille de style.

3 Cliquez sur Nouveau dans la boite de dialogue Éditer Feuille de style.
4 Assurez-vous que la sélection pour Type est Créer un style personnelisé ( classe).
5 Tapez .tablehead pour nommer le nouveau style, puis cliquez sur OK.

6 Une fois le type sélectionné dans la liste à gauche de la boîte de dialogue, sélectionnez les paramètres de mise en forme suivants pour le nouveau style :
Police: Arial, Helvetica, sans-serif
Taille:18 points
Style: normal
7 Cliquez sur OK pour fermer la boite de dialogue Definition du style.
8 Cliquez sur Terminate pour fermer la boite de dialogue Editor Feuille de style qui affiche a present le style .tablehead.

Voulez à présent utiliser la palette de styles pour appliquer le style .tablehead aux titres de tableau de la page Events.

Pour appliquer un style personnelé :

1 Dans la fenêtre Document, sélectionnez les trois cellules de titre du tableau en appuyant sur la touche Contrôle (Windows) ou Commande (Macintosh), puis en cliquant une fois sur chaque cellule.
2 Cliquez sur .tablehead dans palette de styles.

Les cellules affichent le nouveau style dans le document.

where

when

what

3 Fermez la palette de styles.
4 Enregistrez les changements apportés à la page Events en cliquant sur Fichier > Enregistrer.
5 Choisissez Fichier > Fermer pour fermer la page.

Application d'un modele

Vous pouvez également utiliser des modèles pour créé des documents pour le site qui aient une structure et une appearance communes. Les modèles sont utiles si vous voulez vous assurer que toutes les pages d'un site partagent certaines caractéristiques.

Lorsque vous appliquez un même style à un groupe de pages, vous pouvez modifier les informations relatives à toutes ces pages en édotant le modele, puis en l'appliquant de nouveau aux pages en question. Tandis que les éléments propres à chaque page (tels que du texte décrivant un article en vente) restent inchangés, les éléments du modele commun (tels que les barres de navigation) sont mises à jour dans toutes les pages utilisant ce modele.

La page Olivebranch Catalog contient des liens vers plusieurs pages de produit décrivant individuellement certains produits individuels proposés à la vente. Du fait que chaque page de produit utilise une mise en forme et un format identiques, elles ont été créées à l'aide d'un seul modèle.

Dans le cadre de cette section, vous allez éditer un modèle existant afin de modifier les pages de produit auxquelles il a été appliqué. Vous allez ensuite appliquer un autre modele à ces pages afin d'en modifier le format sans en ALTERER le contenu.

Affichage des pages de produit

Commencez par afficher la page de catalogue achevée dans un navigateur.

Pour ouvrir la page Olivebranch Catalog :

1 Choisissez Fichier > Ouvrir, puis selectionnez cat_main_index.htm.
2 Choisissez Fichier > Aperçu dans le navigateur pour ouvrir la page dans une fenêtre de navigateur.

3 Cliquez sur les liens renvoyant aux vins, aux fromages, aux condiments et aux huiles pour afficher les échantillons de page de produit.

Notez que toutes les pages de produit partagent la même barre de navigation située en haut de la page. En plus des liens avec les pages de produit, la barre de navigation contient un lien avec la page de catalogue principale et (dans les graphiques à l'extreme droit de la barre) un lien permettant de revenir à la page d'accueil d'Olivebranch.

4 Fermez le navigateur lorsque vous avez fini de consulter la page de catalogue principale et les pages de produits qui y sont liées.
5 Revenez dans Dreamweaver etCHOISSEZ Fichier > Fermer pour fermer la page de catalogue achievee.

Ouvrez à présent les pages de catalogue inachevées dans un navigateur.

Pour ouvrir la version didacticielle de la page Catalog :

1 Déplacez la fenêtre du Site située à l'arrière-plan vers l'avant-plan en cliquant sur Fenêtre > Fichiers de site.
2 Recherche DW2_cat_main_index.htm dans la liste, puis double-cliquez dessus pour l'ouvrir dans la fenetre Document.

3 Appuyez sur F12 pour prévisualiser la page de catalogue du didacticiel dans un navigateur.
4 Cliquez sur les liens renvoyant aux vins, aux fromages, aux condiments et aux huiles pour afficher les pages de produit sur lesquelles vous allez travailler. Tout comme avec le site acheve, les pages de produit utilisent toutes le même modèle, de sorte qu'elles se ressemblant beaucoup. Dans ce cas, cependant, il manque, dans chacune d'elles, le lien renvoyant à la page de catalogue principale et le graphique en haut à droite qui renvoie à la page d'accueil Olivebranch.
5 Àprous avoir exploré les liens avec les pages de produit, fermez la fenêtre du navigateur.
6 Revenez dans Dreamweaver et choisissez Fichier > Fermer pour fermer la page de catalogue principale.

Modification du modele

Vous allez à présent modifier le modele des pages de produit afin de réparer la barre de navigation. Cela fait, vous allez de nouveau appliquer le modele aux pages en question de manière à ce que la barre de navigation soit mise à jour pour toutes les pages utilisant ce modele.

Pour ouvrir le fichier du modele dans la fenetre Document :

• Dans la fenêtre du site, double-cliquez sur DW2_cat_product.dwt dans le sous-repertoire Templates du réseau Oliveirabranch_site.

Chaque modele contient des régions verrouillées et modifiables. Les régions verrouillées ne peuvent être modifiées qu'à l'intérieur du modele lui-même; elles apparaissent en surbrillance sur toutes les pages auxquelles le modele est appliqué. Les régions modifiables sont des espaces réservées au contenu propre à chacune des pages auxquelles le modele est appliqué. Dans un modele,les régions modifiables apparaissent en surbrillance.

Dans le présence modèle, la barre de navigation se trouve dans une région verrouillée, tandis que les zones destinées à accueillir les photos de produit et le texte sont modifiables pour chaque page de produit.

Éditez à présent le fichier du modele. Commencez par ajouter un lien à l'élément graphique du catalogue.

Pour ajouter à l'élément graphique un lien avec la page de catalogue principale :

1 Cliquez une fois sur l'objet graphique du catalogue.
2 Choisissez Fenetre > Propriétés pour ouvrir l'inspecteur de propriétés.
3 Dans l'inspecteur de propriétés, cliquez sur l'icone de répertoire située à côté du champ Lien vide, puis sélectionnez le fichier DW2_cat_main_index.htm dans le réseau Olivebranch_site.
4 Laissez l'inspecteur de propriétés ouvert.

Ajoutez ensuite un graphique dans le coin supérieur droit de la page et liez-le à la page d'accueil Olivebranch.

Pour ajouter un graphique renvoyant à la page d'accueil Olivebranch :

1 Cliquez à l'intérieur de la cellule vide à droite de l'image du catalogue.
2 Choisissez Insertion > Image, puis selectionnez cat_navphotos.jpg dans le repertoire Assets.

L'element graphique s'affiche dans la cellule.

catalog

3 Assurez-vous que l'élément graphique que vous venez d'ajouter à la cellule est toujours sélectionné (si ce n'est pas le cas, cliquez une fois dessus pour le sélectionner).
4 Dans l'inspecteur de propriétés, cliquez sur l'icone de réseau située à côté du champ Lien vide, puis sélectionnez le fichier DW2_index.htm dans le réseau Olivebranch_site.
5 Fermez l'inspecteur de propriétés.

À présent que vous avez modifié le modele, appliquez-le de nouveau aux pages de produit.

Pour appliquer le modele de nouveau aux pages de produit du catalogue :

1 Choisissez Fichier > Enregistrer pour enregistrer les changements.
2 Lorsque le programme vous demande si vous voulezmettre à jour tous les documents du site local utilisant ce modele, cliquez sur Oui.

Une boîte de dialogue Mettre à jour les pages affiche l' état des pages du site à mesure que le modele est appliqué.

3 Une fois tous les fichiers du site mis à jour, fermez la boîte de dialogue Mettre à jour les pages.

Du fait que la page de catalogue principale contient des liens vers toutes les pages de produit du site, vous pouvez l'utiliser pour prévisualiserrapidement toutes les pages de produit auxquelles vous avez appliqué le modele. Ouvrez la page de catalogue principale dans un navigateur, puis cliquez sur les liens avec les pages de produit.

Pour afficher les pages de produit mises à jour :

1 Double-cliquez sur le fichier DW2_cat_main_index.htm dans la fenetre Site pour le rouvrir dans la fenetre Document.
2 Appuyez sur F12 pour prévisualiser cette page dans votre navigateur par défaut ouCHOISSEZFichier Apercu dans le navigateur pour selectionner un autre navigateur.
3 Cliquez sur les liens renvoyant aux vins, aux fromages, aux condiments et aux huiles pour acceder à chacune de ces pages de produit.
4 Dans chaque page de produit, cliquez sur le catalogue et sur les liens vers la page d'accueil Olivebranch que vous avez ajoutés à la barre de navigation pour voir dequelle manière les changements apportés au modele ont ete appliqués aux pages.
5 Fermez le navigateur lorsque vous avez fini de tester les liens de la barre de navigation des pages de produit.
6 Revenez dans Dreamweaver et choisissez Fichier > Fermer.

Application d'un autre modele à une page

Vou puez appliquer un nouveau modele à une page, même si celle-ci utilise déjà un modele. Le contenu d'une page reste inchangé tant que le nouveau modele contient les mêmes noms de région modifiable que le modele précédemment attaché au document.

Cette technique est utile si vous pouze changer l'apparace d'un groupe de pages sans en ALTERER le contenu. Par exemple, il peut arriver qu'un catalogue ait une version d'hiver et une version d'été. Vous pouze créé une presentation tout à fait nouvelle sans toucher au contenu en utilisant un autre modèle pour changer les images et couleurs d'arrière-plan de la page, ou en réorganisant les positions des régions modifiables.

Voulez appliquer ici un modele d'hiver à une page de produit de manière àmettre à jour son aspect en vue d'une nouvelle saison.

Pour appliquer un nouveau modele à une page existante :

1 Dans la fenêtre du site, double-cliquez sur DW2_cat_wines.flc.htm pour ouvrir la page de produit consacree aux vins dans la fenetre Document.

Les sections de cette page qui apparaissent en surbrillance dans une couleur différente identifient des régions verrouillées qu'il n'est possible d'editor que dans le modèle utilisé pour cette page.

(Si vous ne voirz pas de différence de couleur entre les zones de la page, choisissez Édition > Préférences, sélectionnez Surbrillance dans la liste Catégorie, puis l'option Afficher à côté de Régions verrouillées. Si vous ne voirz toujours pas la couleur de surbrillance, choisissez Affichage > Éléments invisibles).

2 Choisissez Fenetre > Modèles pour ouvrir la palette de modèles.

La palette de modèles contient une liste de tous les fichiers de modulo (dwt) du site local, situés dans le réseau Templates du réseau Olivebranch_site.

3 Dans la palette des modèles, cliquez sur le fichier cat_product_winter.dwt pour lemettre en surbrillance dans la liste.

4 Redimensionnéz lapalette de modèles pour prévisualiser le modele de l'hiver à l'intérieur de lapalette.

Le modele de l'hiver est différent de celui actuellément applique aux pages de produit. Toutefois, du fait qu'il contient les mêmes régions modifiables que le modele courant, vous pouze l'appliquer à la page sans alterer quoi que ce soit.

5 Cliquez sur Appliquer à la page pour appliquer le modele d'hiver à la page de produit pour les vins.
6 Fermez la palette de modèles.
7 Appuyez sur F12 pour prévisualiser la nouvelle page de produit pour les vins dans une fenêtre de navigateur.

8 Lorsque vous avez fini de prévisualiser, fermez la fenêtre du navigateur et revenez à Dreamweaver.
9 Si vous voulez, vous pouvez cliquer sur Fichier > Enregistrer pour enregistrer les modifications que vous venez de faire à la page des vins; les liens du site fonctionneront quel que soit le modele applique à la page.
10 Choisissez Fichier > Fermer pour fermer la page.

Association de comportements à des éléments de page

Un comportement est une combinaison d'evénements et d'actions. Les événements sont des situations qui déclenchent des actions. Par exemple, un événement appelé onClick peut se produit lorsque l'utilisateur clique sur un bouton, ou un événement appelé onMouseOver peut se produit lorsque le pointeur de la souris passée sur un objet. Les actions sont des bouts de code JavaScript préécrit qui executent des tâches spécifique telles que l'ouverture d'une fenêtre de navigateur, la diffusion d'un son ou l'arrêt d'une série video Shockwave.

Lorsque vous associez un comportement à un élément de page, vous spécifiez tant une action que l'évenement qui la déclenché. Dreamweaver offre plusieurs actions prédéfinies que vous pouvez associier à certains éléments de page.

Vous allez appliquer ici des actions d'échange d'image aux éléments graphiques about, events, et catalog de manière à ce que les images s'éclairent lorsque la souris passé dessus (c'est-à-dire lorsque l'évenement onMouseOver se produit). Par exemple, lorsque l'image about s'affiche normalement sur la page, elle a l'aspect suivant :

about

Lorsque vous avez défini un comportement incluant l'action de changement d'image en cas d'événement onMouseOver, l'image about aura cet aspect-ci (version mise en surbrillance de l'image d'origine) lorsque la souris passera dessus :

Commencez par rouvrir le fjichier de page d'accueil que vous avez editede aparavant dans le cadre du didacticiel, puis associez des comportements a certains éléments graphiques de cette page.

Pour rouvrir la page dans Dreamweaver :

1 Déplacez la fenêtre du Site située à l'arrière-plan vers l'avant-plan en cliquant sur Fenêtre > Fichiers de site.
2 Double-cliquez dans la liste sur le fichier de la page d'accueil DW2_index.htm afin de le rouvrir dans la fenetre Document.

Pour associer un comportement à un élément graphique de la page :

1 Cliquez sur l'image about dans la fenetre Document pour la seLECTIONner.
2 Choisissez Fenêtre > Comportements pour ourir l'inspecteur de comportement qui affiche la liste de tous les comportements définis pour l'objet selectionné (il ne devrait pas encore y en avoir).
3 Ajoutez une action à la liste en cliquant sur le bouton plus (+), puis, dans le menu déroulant sur Changer image.

La boîte de dialogue Intervertir l'image affiche la liste de toutes les images de la page.

4 Dans la boite de dialogue Intervertir l'image, selectionnez l'image about dans la liste Images.

Il s'agit de l'image originale qui sera remplacede par une image en surbrillance lorsque le pointeur passera dessus.

5 Cliquez sur Parcourir, à côté du champ Définir la source à et naviguez jusqu'à l'image nav-about_roll.gif dans le repertoire Assets.

Cette image remplace l'image originale en cas d'évenement onMouseOver.

6 Acceptez les options par défaut sous le champ Définir la source à.

L'option Précharger les images charge l'image à intervenir dans le cache du navigateur lors du chargement de la page, de sorte qu'il n'y a pas de pause perceptible avant l'affichage de l'image en surbrillance lorsque l'utiliseur déplace pour la première fois le pointeur de la souris sur l'image about.

L'option Restaurer les images onMouseOut attribue automatiquement l'action de restauration d'image interverte à l'évenement onMouseOut pour cette image. Cette action restitue au bouton son état d'origine lorsqu'l'utilisateur écarte le pointeur du bouton.

7 Cliquez sur OK pour fermer la boîte de dialogue Intervertir l'image en appliquant les changements apportés.

L'inspecteur de comportement inclut à présent les événements et actions que vous venez de définir pour l'image. L'évenement onMouseOver s'affiche avec l'action Intervertir l'image ; ci-dessus figure l'évenement onMouseOut avec l'action Restauration d'image intervertei qui a été définie lorsque vous avez accepté les options par défaut au moment de définir l'action Intervertir l'image.

8 Répétez ces étapes pour associier des actions d'intervention d'image et des événements onMouseOver aux images events et catalog :

Remplacez l'image events par l'image à intervertir nav_events_roll.gif.
Remplacez l'image catalog par l'image nav_catalog_roll.gif.
9 Fermez l'inspecteur de comportement.

Voyez à présent comment les comportements agissant en prévisualisant la page dans un navigateur.

Pour prévisualiser la page dans un navigateur :

1 Cliquez sur F12.
2 Déplacez le pointeur de la souris sur les images about, events, et catalog afin de voir comment elles changent.

Fermez le navigateur lorsque vous avez fini de prévisualiser la page.

3 Revenez à Dreamweaver et enregistrez les changements enclinquent sur Fichier > Enregistrer.

Ajout d'une série video flash

La page d'accueil Olivebranch achevée comprend une section consacrée aux spécialités de la semaine dans laquelle divers articles en vente se fondent graduèlement les uns dans les autres dans la partie droite de la page.

La section "specials" se compose en réalité de deux calques : le premier contient l'image statique this week's specials, et le second (superposé au premier) contient une série video flash dans laquelle les articles en vente se fondent les uns dans les autres. Jusqu'ici, votre version de la page d'accueil ne comprend que le calque avec l'image statique. Vous allez ajouter ici la série video flash dans un calque superposé au calque de l'image afin de recréer la section "specials" telle qu'elle apparait dans la page d'accueil achevée.

Du fait que la série video flash sera sur un calque directement place sur le calque de l'image this week's special, vous doivent désactiver l'option Empêcher le chevauchement.

Pour permettre aux calques de se chevaucher :

1 Choisissez Fenêtre > Calques pour rouvir lapalette de calques.
2 Désactive l'option Empécher le chevauchement.

Vous allez à partir devoir creer un nouveau calque pour accueillir la série video flash.

Pour ajouter un nouveau calque contenant une série video flash :

1 Choisissez Insertion > Calque.
2 Cliquez une fois pour placer le curseur à l'intérieur du nouveau calque.
3 Choisissez Insertion > Flash, puis selectionnez home ticker.swf dans le repertoire Assets.

Le calque s'adapte à la taille de la série video flash représentée par un rectangle de couleur grise.

Ensuite, jouez la série video flash dans la fenêtre Document et alignez-la sur le calque this week's specials.

Pour jouer la série video flash dans la fenêtre Document :

• Cliquez Affichage > Plug-ins > Lire tout.

Pour aligner le calque de la série video flash sur le calque des spécialités de la période :

1 Cliquez sur la cordure du calque pour le selectionner tout entier, puis faites-le glisser en le tirant par sa poignée jusqu'à ce qu'il soit superposé au calque this week's specials.

La série video flash contient des blocs de couleur de même qu'une ligne horizontale correspondant à l'objet graphique statique this week's special. Utilisez-les pour vous guider lorsque vous placez le calque de la série video flash au-dessus du calque de l'image.

Remarque: Il se peut que la série video varie en fonction des résolutions d'écran. Si le calque de la série video flash ne semble pas s'aligner sur le calque this week's specials,CHOISSEFENETRE > Propriétés pour ouvrir l'inspecteur de propriétés et réinitialiser les dimensions de la série video flash sur W 329, H 94.

Les deux calques superposés devraient avoir l'aspect suivant :

2 Choisissez Fichier > Enregistrer pour enregistrer les changements apportés.

Vérification du site

À present que vous avez apporté toutes les modifications nécessaires aux fischiers inachevés, consultez le site tout entier dans un navigateur pour voir à quoi il ressemble.

Pour prévisualiser le site dans un navigateur :

1 Tant que la page d'accueil est ouverte, appuyez sur F12 pour l'ouvrir dans un navigateur.

2 Regardez la série video flash, puis cliquez sur les images about, events, et catalog pour afficher les autres pages modifiées pour le site.

3 Lorsque vous avez fini d'examiner le site que vous venez de creer, fermez la fenetre du navigateur, puis revenez à Dreamweaver et choisissez Fichier > Fermer pour fermer la page d'accueil.

CHAPITRE 3

Prise en main

Prise en main – Vue d'ensemble

Commencer à utiliser Dreamweaver est aussi simple que d'ouvrir un document HTML ou d'en creer un nouveau. Toutefois, pour que vous puissiez profiter au mieux de votre experience Dreamweaver, il est utile de comprendre les concepts de base régissant l'espace de travail Dreamweaver et la manière de désirir les options les plus adaptées à votre type de travail.

Espace de travail de Dreamweaver

L'espace de travail de Dreamweaver est très flexible, de sorte qu'il s'adapte à différents types de travail et de niveaux d'expertise. Rares sont les composants de l'espace de travail de Dreamweaver que vous utilisez en permanence :

• La fenêtre Document affiche une image approximative du document en cours tel qu'il s'affichera dans un navigateur web.
  Le lanceur offre des boutons pour l'ouverture et la fermeture des inspecteurs et palettes les plus frequentlyment utilisés. Les icônes du lanceur sont reproduites sur le mini-lanceur au bas de la fenêtre du document afin de faciliter l'accès lorsqu'elle lanceur est fermé.
  La palette d'objets contient des boutons permettant de creer divers types d'objets tels que images, tableaux, calques etc.
  L'inspecteur de propriétés affiche les propriétés de l'objet selectionné.
• Les menus contextuels vous permettent d'acceder rapidement à des commandes utiles en rapport avec la seLECTION ou la zone en cours.
• Les éléments mobiles ancrables vous permettent de combiner les fenêtres flottantes, les inspecteurs et autres palettes en une ou plusieurs fenêtre(s) à ontlets.

Fenêtre Document

La fenêtre Document affiche une image approximative du document en cours tel qu'il s'affichera dans un navigateur web. La barre de titre de la fenêtre Document affiche le titre de la page et, entre parenthèses, le nom de fichier et une astérisque si le fichier contient des modifications non enregistrées.

Les balises contrôle le texte ou l'objet sélectionné apparaisent dans le/selecteur de balise en bas à gauche de la fenêtre Document. Cliquez sur ces balises pour sélectionner précisé une balise HTML et son contenu. Cliquez sur

pour sélectionner le corps du document.

La taille estimée du document et le temps de téléchargement de la page, y compris de tous les éléments liés tels que les images et les séquences video Shockwave, s'affichent à gauche du mini-lanceur. Voir Vérification du temps et de la taille de téléchargement, page 152.

La série de boutons en bas à droite de la fenêtre Document est appelée minilanceur ; il s'agit d'une version miniature du lanceur. Les boutons du mini-lanceur permettent d'ouvrir la fenêtre Site, lapalette de la bibliothèque, lapalette de styles, l'inspecteur de comportement, l'inspecteur de scénarios et l'inspecteur HTML.

Le menu déroulant Taille de fenêtre vous permet de redimensionner la fenêtre du document sur des dimensions prédéterminées ou personnalisées. Voir Redimensionnement de la fenêtre Document, page 80.

Utilisation de l'inspecteur de propriétés

L'inspecteur de propriétés affiche les propriétés de l'objet selectionné.

Tout changement apporté à une propriété est immédiatement répercuté dans la fenêtre Document.

Les propriétés qui s'affichent dépendent de l'objet seLECTIONné. Pour obtenir des informations sur des options particulières, seLECTIONné un objet, puis cliquez sur l'icone Aide dans le coin supérieur droit de l'inspecteur de propriétés.

L'inspecteur de propriétés affiche initialement les propriétés les plus couramment utilisées. Cliquez sur la flèche d'agrandissement dans le coin inférieur droit pour afficher toutes les propriétés.

Utilisation du lanceur

Le lanceur comprend des boutons permettant d'ouvrir et de fermer les palettes, fenêtres et inspecteurs.

Voir Options de la fenêtre Site, page 130, Utilisation des éléments de la bibliothèque, page 248, Utilisation de la palette de styles, page 181, Inspecteur de comportements, page 261, Utilisation de l'inspecteur de scénarios, page 286 ou Utilisation de l'inspecteur HTML, page 154.

Utilisation de la palette d'objects

La palette d'objects contient des boutons permettant d'insérer des objets tels que tableaux, calques et images. Cliquez sur n'importequel bouton ou faites glisser l'objet vers la fenetre Document pour creer l'objet spécifique.

Dreamweaver comprehend quatre volets dans la palette d'objets : Commun, Formulaires, Titre et Invisibles. Utilisez le menu déroulant pour basculer d'un volet à l'autre. Vous pouvez modifier n'importe quel objet de la palette ou créé vos propres nouveaux objets. Voir Modifier la palette d'objets et le menu Insertion, page 308. Pour plus d'informations sur les options de chaque volet, affiche les rubriques correspondantes dans l'aide de Dreamweaver.

• Le volet Commun contient les objets les plus couramment utilisés tels que les images, tableaux et calques.
  Le volet Formulaires contient des boutons pour creer des formulaires et des éléments.
  Le volet Titre contient des objets pour l'ajout de divers éléments HEAD tels que des balises META, TITLE et BASE.
• Le volet Invisibles contient des boutons permettant de creer des objets invisibles dans la fenetre Document, tels que des ancre nommées. Choisissez Affichage > Éléments invisibles pour afficher des icones marquant les emplacements de ces objets. Cliquez sur les icones pour sélectionner les objets et modifier leurs propriétés. Voir À propos des éléments invisibles, page 85.

Quelques paramètres des Préférences générales affectent la palette d'objets. Pour modifier ces préférences,CHOISSEZ Édition > Préférences,puis seLECTIONnez Général.

Lors de l'inspection d'objets tels que tableaux, scripts, et éléments HEAD, une boîte de dialogue vous demande des informations supplémentaires. Vous pouvez supprimer l'affichage de cette boîte de dialogue en désactivant l'option Afficher la boîte de dialogue lors de l'insertion d'objects. Utilisez l'inspecteur de propriétés pour modifier les propriétés de l'objet après l'avoir inséré.
- La préférence de la palette d'objets vous permet d'afficher le contenu de la palette sous la forme de texte, d'icons ou d'une combinaison de texte et d'icons.

Utilisation des menus contextuels

Dreamweaver fait un large usage des menus contextuels qui permettent d'accederrapidement aux commandes et propriétés les plus utiles relatives à l'objet ou à la fenêtre sur lequel/laquelle vous travailliez. Les menus contextuels n'affichent que les commandes associées à la seLECTION en cours.

Pour utiliser les menus contextuels :

1 Ouvrez le menu contextual.
Dans Windows, cliquez sur l'objet ou la fenetre avec le bouton droit de la souris.
Sur Macintosh, cliquez en maintainant la touche Contrôle enfoncée sur l'objet ou la fenetre.
2 Sélectionnez la commande dans le menu contextuel, puis relâchez le bouton de la souris.

Utilisation des palettes flottantes ancrables

La plupart des palettes et des inspecteurs de Dreamweaver peuvent être combinés en une seule palette à onglets. Cela permet d'acceder aisément aux informations nécessaires sansencerer l'espace de travail (le lanceur, l'inspecteur de propriétés, la fenêtre Site, et l'inspecteur HTML ne peuvent pas êtrerangés de cette façon).

Pour combiner deux ou plusieurs palettes afin de creer une palette à onglets :

1 Faites glisser une palette flottante sur une autre. Lorsque la cordure en surbrillance apparait sur la palette cible, relâchez le bouton.
2 Cliquez sur n'importe quel oglet de la fenetre pour l'afficher à l'avant-plan.

Pour empêcher une palette de rejoindre la palette à ontlets :

• Appuyez sur la touche MAJ tout en faisant glisser la palette.

Pour-retirer une fenetre d'une palette à onglets :

Faites glisser son onglet hors de la fenetre.

Paramétrage des préférences

Dreamweaver intègre des paramètres de préférence qui contrôle l'aspect général de l'interface utilisateur de Dreamweaver de même que des options liées à des fonctions spécifique tels que les calques, les feuilles de style, le langage HTML, leséditeurs externes et la prévisualisation de pages dans les navigateurs. Les informations relatives à certaines options de préférence spécifique sont fournies dans ce guide de l'utilisateur et la rubrique sur la fonction associée.

Les préférences suivantes affectent l'aspect général de l'espace de travail. Pour plus d'informations sur une option de préférence spécifique, consultez la rubrique correspondante dans l'aide de Dreamweaver.

Paramétrage des préférences pour Général

Les préférences générales permettent d'entrer des paramètres contrélant l'aspect général de l'interface utilisateur de Dreamweaver.

Pour modifier ces préférences, choisissez Édition > Préférences, puis Général.

Paramétrage des préférences pour Polices / Encodages

Utilisez ces préférences pour définir les polices par défaut et l'encodage des polices pour Dreamweaver. Ces paramètres, tels que les préférences pour les polices du navigateur, vous permettent de travailler avec un texte affché avec la police et la taillie de police de votre choix, sans que cela n'affecte la manière dont les autres utilisateurs voient le document dans un navigateur.

Pour modifier les préférences de Polices / Encodages, choisisse Édition > Préférences, puis Polices / Encodages, et choisisse les options désirées.

Paramètres de la police Déterminé le jeu de polices utilisé pour les documents encodés dans chacun des encodages de paramètres de police. Les divers yeux de polices doivent être installés sur la machine pour que les polices s'affichtent comme des choix lorsque vous sélectionné des polices proportionnelles, fixes ou de type inspecteur HTML.

Inspecteur HTML Il s'agit de la police utilisée pour tous les textes s'affichtant dans l'inspecteur HTML. Le paramétrage par défaut dépend des polices installées sur le système.

Paramétrage des préférences pour la Barre d'État

Utilisez ces préférences pour définir les options applicables à la barre d'etat qui s'affiche au bas de la fenêtre Document.

Taille de la fenêtre Permet de personneliser les tailles de fenêtre qui s'affichent dans le menu déroulant de la barre d'objet. Voir Redimensionnement de la fenêtre Document, page 80.

Vitesse de connexion Déterminé la vitesse de connexion (exprimée en kilobits par seconde) utilisé pour calculer l'importance du téléchargement. La taille du téléchargement pour la page s'inscrit dans la barre d'etat. La taille du téléchargement pour les images s'inscrit dans l'inspecteur de propriétés lorsqu'une image est sélectionnée.

Afficher le mini-lanceur dans la barre d'etat Fait en sorte que Dreamweaver affiche le mini-lanceur au bas de la fenetre Document. Les boutons du mini-lanceur permettent de lancer des fenêtres, des palettes et des inspecteurs.

Paramétrage des préférences pour les palettes flottantes

Utilisez les préférences pour Palettes flottantes pour déterminer quelsinspecteurs, fenêtres et palettes s'affichent toujours en haut de la fenêtre Document.

Pour spécifique les préférences pour Palettes flottantes :

• Choisissez Édition > Préférences, puis sélectionnez Polettes flottantes.

Par défaut, tous les inspecteurs, fenêtres et palettes sont paramétrés pour s'afficher toujours dans le haut de la fenêtre Document. Si vous voulez, par exemple, que l'inspecteur HTML passes derrière la fenêtre Document lorsqu'il n'est pas utilisé, désactiver l'options HTML. L'inspecteur HTML ne s'affichera dans le haut de la fenêtre Document que s'il est actif.

Paramétrages des préférences pour la surbrillance

Les préférences pour Surbrillance vous permettent de personneliser les couleurs utilisées pour identifier des régions du modele et des éléments de bibliothèque dans la fenêtre Document. Pour plus d'informations, cliquez sur l'un des éléments suivants :

Pour personneliser les couleurs de surbrillance, voir Configuration des préférences pour les modèles, page 94.
Pour spécifique la couleur de surbrillance des éléments de bibliothèque, voir Configuration des préférences de la bibliothèque, page 249.
- Vous pouvez également spécifique une couleur pour les balises de tiers afin de faciliter leur différenciation par rapport aux balises de Dreamweaver.

Utilisation de Dreamweaver avec d'autres applications

Dreamweaver s'adapte à la conception de votre site web et au processus de développement en vous permettant de travailler aisément avec d'autres applications. Pour toute information sur le travail avec d'autres applications telles que les navigateurs,éditeurs HTML,éditeurs d'image et autres outils d'animation, voir les rubriques suivantes :

Pour plus d'informations sur l'utilisation de Dreamweaver avec d'autres éditeurs HTML, tels que HomeSite ou BBEdit, voir Utilisation d'autres éditeurs HTML, page 161.
- Vous pouvez spécifique des navigateurs favoris pour la prévisualisation de votre site. Voir Aperçu dans des navigateurs, page 151.
- Vous pouvez lancer un éditeur d'image externe tel que Macromedia Fireworks, depuis Dreamweaver. Voir Utilisation d'un éditeur d'image externe, page 192.
Pour toute information sur l'ajout d'animations à votre site avec des séquences de l'application Flash Player, voir Insertion d'animations Flash Player, page 298.
Pour savoir comment rendre votre site interactif à l'aide de séquences video Shockwave, voir Insertion d'animations Shockwave, page 296.

CHAPITRE 4

Creation de documents

Création de documents – Vue d'ensemble

Les documents sont les pages que voient les utilisateurs lorsqu'ils visitent un site web. Ils peuvent contérer du texte et des images, ou des éléments au contenu plus sophistiqué tels que dessons, des animations et des liens vers d'autres documents. Au fur et à mesure que vous travailliez avec des documents, Dreamweaver généra automatique le code HTML sous-jacent. Utilisez linspecteur HTML pour examiner ou modifier ce code.

Les documents sont créés dans Dreamweaver à l'aide de pages HTML vierges ou de modèles. Vous pouvez également ouvrir et modifier des documents HTML créés dans d'autres applications. Voir Création de nouveaux documents HTML, page 78. Lorsque vouséditez un document, vous pouvez désposer son contenu sur une page en utilisant des repères visuels tels que des grilles, des règles ou la fonction d'alignement. Les tracés d'image vous permettent de dupliquer des dessins de page. Voir Utilisation de guides visuels pour la conception, page 79.

Pour ajouter du texte aux documents, vous pouvez soit le taper dans la fenêtre Document, soit coller du texte en provenance d'autres sources. Les images, barres frontales et autres objets sont ajoutés à l'aide de la palette d'objets ou des commandes du menu Insertion. Voir Ajout de texte et insertion d'objets, page 82. À mesure que vous ajoutez du contenu, vous pouvez selectionner et modifier des objets directement dans la fenêtre de document. Dans certains cas, vous aurez peut être à selectionner des marqueurs représentant des éléments de la page invisibles dans la fenêtre de document. Voir Sélection d'éléments dans la fenêtre Document, page 84.

Utilisez la boîte de dialogue Propriétés de la page pour configurer un document et définir des éléments de base de la page. Le titre de la page identifie le document pour l'utilisateur. Les images d'arrière-plan, les couleurs d'arrière-plan de même que les couleurs de texte et de lien personnelisent la page et permettent de désigner le texte ordinaire des liens hypertexte. Voir Configuration de documents, page 86.

Pour le choix des couleurs, vous pouvez selectionner vos couleurs sur le bureau ou dans la palette des couleurs en précisant que vous ne pouze exactement la même couleur ou une couleur compatible avec le web. Voir Choix de couleurs, page 88. Dreamweaver offre une méthode facile d'afficher et de modifier le contenu de l'entête (HEAD) sans avoir à toucher au code HTML. Voir Affichage et édition du contenu de l'EN-TÊTE, page 90.

Déciation de nouveaux documents HTML

Vous pouvez creer de nouveaux documents HTML vierges dans Dreamweaver ou baser votre nouveau document sur un modele. Vous pouvez également ouvrir un document HTML existant,quelle que soit la maniere dont il a eté créé.

Ordinairement, vous creez des documents HTML pour un site web spécifique. Pour savoir comment creer ou editer un site, voir Creation d'un site local, page 106.

Pour ouvrir des fichiers HTML existants :

• Choisissez Fichier > Ouvrir.

Pour creer un document HTML vierge :

Choisissez Fichier > Nouveau.

Si vous ouvrez l'inspecteur HTML (choisissez Fenêtre > HTML), vous verrez qu'il ne s'agit pas réellement d'un document vierge; il contient des balises HTML HEAD et BODY pour vous aider à démarrer. Lorsque vous tapez dans la fenêtre Document ou insérez des objets tels que des tableaux et des images, vous pouvez laisser l'inspecteur HTML s'ouvrir et surveiller la manière dont vous creez le code source HTML.

Remarque: Lorsque vous enregistrez un nouveau fjichier, n'utilise pas de caractères ASCII complexes (par exemple é, , ¥) dans le nom de fjichier si vous avez l'intention de placer le fjichier sur un serveur distant. Bon nombre de serveurs coderont ces caractères lors du téléchargement, ce qui risque de supprimer les liens avec le fjichier.

Pour creer un nouveau document basé sur un modele :

1 Choisissez Fichier > Nouveau à partir d'un modele.

Une boîte de dialogue affiche la liste des modèles disponibles pour le site en cours.

Lorsque vous utilisez un modele, certaines parties du document sont verrouillées de sorte qu'il est impossible de les changer. Ceci garantit une certaine cohérence lorsque vous utilisez un modele pour plusieurs documents d'un site.

2 Sélectionnez un modèle, puis cliquez sur Sélectionner.

Pour changer les parties modifiables du modele, selectionnez le contenu de l'espace réservé et tapez quelque chose pour le replacer. Les parties non modifiables du module sont signalées par une couleur de surbrillance. Pour personnelier les couleurs de surbrillance, voir Configuration des préférences pour les modèles, page 94.

Pour en savoir plus sur le dessin et le travail avec des modèles, voir Modèles - Vue d'ensemble, page 91.

Utilisation de guides visuels pour la conception

Dreamweaver offre un grand nombre de fonctions qui vous aident à reconveoir des documents et à déterminer l'aspect qu'ils auront dans un navigateur. Voici ce qu'il vous permet de faire :

adapter instantanément la taille de la fenetre Document à celle de la fenetre souhaitee afin de contrôle la disposition des éléments sur la page ;
afficher des règles afin de-disposer d'un repère visuel pour le positionnement et le redimensionnement des calques ou des tableaux;
utiliser un trace d'image en arrêtre-plan de manière à pouvoir reproductive plus aisément un dessin créé dans une application d'édition d'illustration ou d'image;
utiliser la grille pour obtenir un positionnement précis des calques. Les marques de la grille sur la page vous aident à aligner les calques et, lorsque la fonction d'alignement sur la grille est activée, les calques sont automatiquement alignés lorsque vous les creez ou les déplacez (d'autres objets tels que des tableaux, des images et des paragraphs ne s'alignent pas sur la grille).

Redimensionnement de la fenetre Document

Les dimensions actuelles (en pixels) de la fenêtre Document, de même que plusieurs formats de moniteur ordinaires, s'affichent dans le menu dérouulant Taille de fenêtre dans la barre d'etat de la fenêtre. Pour vous aider à dessiner une page agréable d'aspect dans une (ou diverses) résolution(s) spécifique(s), vous pouvez adapter la fenêtre Document à l'un des formats figurant dans la liste du menu dérou Lambert.

Pour modifier les valeurs figurant dans le menu dérouulant Taille de fenêtre :

1 Choisissez Édition > Préférences, puis Barre d'état.
2 Cliquez sur n'importe qu'elle valeur de largeur ou de hauteur dans la liste Taille de la fenetre, puis tapez une nouvelle valeur.

Pour faire en sorte que la fenêtre Document s'aligne uniquement sur une largeur spécifique (sans que sa hauteur change), Sélectionnez une valeur de hauteur et supprimez-la.

3 Cliquez sur le champ Description pour entrer un texte descriptif sur une taille spécifique.

Par exemple, vous pouriez taper "SVGA" ou "PC moyen" à côté de l'entrée correspondant à un moniteur d'une résolution de 800 x 600 pixels, et "Mac 17 po." à côté de l'entrée correspondant à un moniteur d'une résolution de 832 x 624 pixels.

Pour ajouter une valeur au menu dérouulant Taille de la fenêtre :

1 Choisissez Édition > Préférences > Barre d'état.
2 Cliquez sur la derniere valeur de la liste, puis appuyez trois fois sur la touche tabulation pour ajouter une ligne.
3 Entrez des valeurs pour Largeur, Hauteur et Description.

Affichage de règles

Voussouspoucezafficheresreglesurlesbordsgaucheetsupérieurdela pageen pixels,enpoucesoencentimetrese.

Pour changer les paramètres de la règle, Sélectionné l'une des options suivantes :

Pour activer et désactiver les régles,CHOISSEZ Affichage > Regles > Afficher.
Pour changer l'origine, faites glisser le point zéro sur la page. Pour rétabrir la position de l'origine par défaut,CHOISSEZ AFFICHAGE > Régles > Rétablir origine.
Pour changer l'unité de mesure,CHOISSEs Affichage > Regles,puis selectionnee Pixels,Pouces ou Centimetre.

Utilisation du tracé de l'image

Utilisez un trace de l'image comme guide pour recreer le dessin d'une page maquettée dans une application graphique. Un trace est une image JPG, GIF ou PNG placé à l'arrière-plan de la fenêtre Document. Vous pouvez masquer l'image, définir son opacité et modifier sa position.

Le trace de l'image n'est visible que dans Dreamweaver. Il est toujours invisible lorsque vous affichez la page dans un navigateur. Lorsque le trace de l'image est visible, l'image et la couleur d'arrière-plan ne sont pas visibles dans la fenêtre Document ; en revanche, elles le sont lorsque la page est affichée dans un navigateur.

Pour placer un trace de l'imagin dans la fenetre Document :

1 Choisissez Affichage > Trace de l'image > Charger.
2 Dans la boîte de dialogue qui s'affiche, Sélectionnez une image, puis cliquez sur OK.
3 La boite de dialogue Propriétés de la page s'affiche. Sécífiez la transparence de l'image en faisant coulibser le curseur de Transparence de l'image.

Vou puez egalent selectionner un trac de l'imag ou modifier la transparence du trac de l'imag actuel a tout moment dans la boite de dialogue Proprietés de la page en cliquant sur Modifier > Proprietés de la page.

Pour commuter l'affichage du trace de l'image :

Choisissez Affichage > Trace de l'image > Afficher.

Lorsque le trace de l'image est visible, l'image et la couleur d'arrière-plan ne le sont pas.

Pour modifier la position d'un tracé de l'image, procédez de l'une des manières suivantes :

Pour désigner la position du tracé de l'image, désisissez Affichage > Tracé de l'image > Ajuster la position, puis tapez des valeurs de coordonnées X et Y.
Pour déplacer l'image par incréments d'1 pixel à la fois, utilisez les touches fléchéées
Pour déplacer l'image par incrément de 5 pixels à la fois, appuyez simultanément sur la touche Maj et sur l'une des touches fléchées
Pour déplacer à nouveau le trace de l'image vers le coin supérieur gauche de la fenêtre du document (0,0), désissez Affichage > Trace de l'image > Réinitialiser la position.

Pour aligner le trace de l'image sur un objet selectionné :

1 Sélectionnez un objet dans la fenêtre Document.
2 Choisissez Affichage > Trace de l'image > Aligner l'image avec la selection. Le coin supérieur gauche du trace de l'image est aligné sur le coin, supérieur gauche de l'objet sélectionné.

Utilisation de la grille

Utilisez la grille comme guide visuel pour le positionnement ou le redimensionnement des calques. Si la fonction d'alignement automatique est activée, les calques s'alignent automatiquement sur le point de la grille le plus proche lorsqu'ils sont déplacés ou redimensionnés. La fonction d'alignement automatique déterminé si la grille est visible ou non. Voir Alignment des calques sur la grille, page 223.

Ajout de texte et insertion d'objects

Pour ajouter du contenu aux pages, tapez ou en collez du texte et insérez des objets tels que des images, des tableaux et des calques.

Pour ajouter du texte au document, procedede l'une des manieres suivantes :

Tapez le texte directement dans la fenetre Document.
Copiez du texte d'une autre application, puis positionnez le curseur dans la fenêtre Document etCHOisissez Édition > Coller comme texte. La mise en forme du texte appliquée dans l'autre application n'est pas preservée, mais les sauts de ligne sont preservés.

Pour plus d'informations sur la mise en forme du texte, voir Formatage du texte -Vue d'ensemble,page 167.

Pour insérer des tableaux, images et autres objets dans le document, procédez de l'une des manières suivantes :

Utilisez les commandes du menu Insertion pour insérer les objets spécifiques dans le document à l'emplacement du curseur.
- Choisissez Fenêtre > Objects pour ouvrir la palette d'objets. Recherche le type d'objet de votrechioix, puis cliquez dessus ou faites-le glisser pour l'insérer dans la fenêtre Document.

Pour la plupart des objets, une boîte de dialogue s'affiche, vous invitant à sélectionner des options ou le fjichier souhaïte. Pour masquer la boîte de dialogue, choisissez Édition > Préférences, sélectionnez Général, puis désélectionnéz l'option Afficher la boîte de dialogue lors de l'insertion d'objets.

Utilisation de barres horizontally

Les barres frontontales sont utiles pour organiser les informations. Sur une page, le texte et les objets peuvent être visuellement séparés par une ou plusieurs barres. Les barres frontontales peuvent également être utilisées pour souligner oumettre en valeur des titres et d'autres éléments.

Pour creer une barre horizontally :

1 Dans la fenêtre Document, placez le curseur la où vous pouze insérer une barre horizontale.
2 Procedez de l'une des manieres suivantes :
- Choisissez Insertion > Barre horizontally.
- Choisissez Fenêtre > Objects pour ouvrir la palette d'objects, puis cliquez sur le bouton Barre horizontale.

Pour modifier une barre horizontally :

1 Dans la fenêtre Document, Sélectionnez la barre horizontally.
2 Choisissez Fenetre > Propriétés pour ouvrir l'inspecteur de propriétés.
3 Modifie la barre horizontally en changeant l'une des propriétés suivantes : L et H spécifique la largeur et la hauteur de la barre en pixels ou comme pourcentage du format de page.

Aligner spécifique l'alignment de la barre (Par défaut, Gauche, Centre, Droite). Ce paramétrage ne s'applique que si la largeur de la barre est inférieure à celle de la fenêtre du navigateur.

Ombrage spécifique si la barre est dessinée avec un ombrage. Désactiver cette option pour dessiner la barre en couleur pleine.

Sélection d' éléments dans la fenêtre Document

Ordinaire, vous-cliquez sur un élément pour le sélectionner. Si un élément est invisible, vous dévrez peut-être le rendre visible avant de le sélectionner.

Pour selectionner des éléments, utilisez les techniques suivantes :

Pour selectionner un élément dans la fenêtre Document, faites-le glisser et cliquez dessus.
Pour selectionner un élément invisible, choisissez Affichage > Éléments invisibles, puis cliquez sur le marqueur de l'élement. Voir À propos des éléments invisibles, page 85.

Certain objets apparaissent sur la page à un endroit différent de celui dans lequel leur code est inséré. Par exemple, un calque peut se trouver n'importe où sur la page, mais le code le définitissant se trouve dans un endroit fixe. Dreamweaver affiche des marqueurs pour montré l'emplacement du code pour les éléments invisibles.

Pour afficher le code HTML associé au texte ou à l'objet sélectionné,CHOISSEZ Fenetre HTML pour ouvrir l'inspecteur HTML.
Pour sélectionner le code HTML sans ouvrir l'inspecteur HTML, cliquez sur une balise dans le sélection de balise en bas à gauche de la fenêtre Document. Le sélection de balise affiche toujours les balises contrôlant la sélection en cours ou l'emplacement du cursesur.

Par exemple, si vous avez defini un lien pour une image, le code HTML ressemble à ceci :

< / a> Le fait de cliquer sur l'image dans la fenetre Document selectionne .

Pour sélectionner le lien, cliquez sur l'image dans la fenêtre Document, puis cliquez sur le qui apparait dans le sélecteur de balise.

À propos des éléments invisibles

Choisissez Affichage > Éléments invisibles pour afficher ou masquer les marqueurs de la fenêtre Document qui représentent des éléments invisibles tels que des formes, des ancre nominées, des commentaires et des scripts. Le fait d'afficher des éléments invisibles vous permet de les scélectionner, de les afficher et de changer leurs propriétés dans l'inspecteur de propriétés.

Les marqueurs d'objet qui s'affichent lorsqu vous choisissez Affichage > Éléments invisibles dépendant des paramètres du panneau Éléments invisibles de la boîte de dialogue Préférences. Par exemple, vous pouvez spécifique que les ancre nominées soient visibles, mais qu'il n'y ait pas de saut de ligne. Voir Paramétrage des préférences pour les éléments invisibles, page 85.

Il est possible de creer certains éléments invisibles (commentaires, ancrennommées, et scripts) à l'aide des boutons du panneau Invisibles de la palette d'objets, puis de les modifier à l'aide de l'inspecteur de propriétés. Voir Utilisation de la palette d'objets, page 70.

Paramétrage des préférences pour les éléments invisibles

Utilisez Éléments invisibles pour afficher ou masquer des marqueurs représentant des éléments tels que des scripts, commentaires et ancre nommées non visibles dans la fenêtre Document. L'affichage d'éléments invisibles vous permet de les sélectionner, de les afficher et de modifier leurs propriétés dans l'inspecteur de propriétés.

Pour modifier ces préférences, choisissez Édition > Préférences, Éléments invisibles, puis choisissez des éléments à rendre visibles ou invisibles. Une coche s'inscrivant à côté du nom de l'élement dans la boîte de dialogue signifie qu'il est visible. Il faut selectionner Affichage > Éléments invisibles pour que les marqueurs représentant des éléments invisibles s'affichent dans la fenêtre Document.

Pour obtenir une explication sur les préférences de Éléments invisibles, voir l'aide de Dreamweaver.

Configuration de documents

Les titres de page, les images et couleurs d'arrière-plan, de même que les couleurs de texte et de lien sont des propriétés de base des documents HTML. Les titres de page identifient et notamment les documents. Les images ou couleurs d'arrière-plan définissent l'aspect global du document. Les couleurs de texte aident les utilisateurs à désigner le texte ordinaire des liens hypertexte, et à différencier les liens visités de ceux qui ne l'on pass été.

Modification du titre d'une page

Le titre d'une page HTML est un élément très important. Il aide les utilisateurs à conserver la trace de ce qui s'affiche en cours de navigation ; il identifie aussi la page dans les listedes de l'historique et des signets. Si vous n'attribuiez pas de titre à la page, elle apparaitra dans la fenêtre du navigateur et dans les listedes de signet et de l'historique comme Document sans titre.

Pour changer le titre d'une page :

1 Procedez de l'une des manieres suivantes :
- Choisissez Modifier > Propriétés de la page.
- Cliquez sur Propriétés de la page dans le menu contextuel qui s'affiche lorsque vous cliquez avec le bouton droit (Windows) ou cliquez en tenant la touche Contrôle enforcée (Macintosh) dans la fenêtre Document.
- Choisissez Affichage > Contenu de l'en-tête, puis cliquez sur le bouton Titre.
2 Tapez le titre de la page dans le champ Titre, puis cliquez sur OK. Le titre s'affiche dans la barre de titre de la fenetre Document. Le nom de fichier de la page et du repertoire dans lequel le fichier est enregistré s'inscrivent entre parentheses à côté du titre.

Définition d'une image d'arrière-plan ou d'une couleur de page

Utilisez la boîte de dialogue Propriétés de la page pour définir une image ou une couleur pour l'arrière-plan de la page. Si vous utilisez une image et une couleur d'arrière-plan, la couleur s'affiche pendant le téléchargement de l'image. Si l'image d'arrière-plan comprend des pixels transparents, la couleur d'arrière-plan filtreet.

Pour définitir une image ou une couleur d'arrière-plan :

1 Choisissez Modifier > Propriétés de la page, ou Sélectionnez Propriétés de la page dans le menu contextual.
2 Entrez le chemin d'accès de l'image d'arrière-plan dans le champ Image d'arrière-plan, ou cliquez sur l'icone de repertoire pour naviguer jusqu'à l'image et la sélectionner.

Dreamweaver génére une mosaïque (réplique) de l'image d'arrière-plan si elle ne replit pas entièrement la fenêtre du navigateur.

3 Sélectionnez une couleur d'arrière-plan dans la palette Couleur d'arrière-plan. Voir Choix de couleurs, page 88.

Paramétrage des couleurs de texte par défaut

Définissez des couleurs par défaut pour le texte ordinaire, les liens, les liens visités et les liens actifs dans la boîte de dialogue Propriétés de la page, ou désissez une palette de couleurs prédéfinie pour déterminer les couleurs de l'arrière-plan et du texte. Voir Choix de couleurs, page 88.

Pour définiir les couleurs de texte par défaut, procédez de l'une des manières suivantes :

• Choisissez Modifier > Propriétés de la page, puis paramétrz la couleur des options Couleur du texte, Couleur du lien, Liens visités et Liens actifs.
• Choisissez Commandes > Définir palette de couleurs, puis désisissez une couleur d'arrière-plan et une combinaison de couleurs pour le texte et les liens. La zone d'échantillonnage affiche l'aspect que donnera la palette de couleurs dans le navigateur.

Choix de couleurs

Bon nombre de boîtes de dialogue et d'inspecteurs de propriétés de Dreamweaver offrent une case couleur permettant d'acceder à unepalette de couleurs. Utilisez la palette de couleurs pourCHOISIR LA COUER D'un élément.

Pour désir une couleur dans Dreamweaver :

1 Cliquez sur la case couleur de n'importe qu'elle boite de dialogue ou inspecteur de propriétés.

2 PourCHOIsIR une couleur,procedez de l'une des manieres suivantes:

• Utilisez le compte-gouttes pour selectionner un échantillon de couleur dans la palette. Toutes les couleurs de lapalette sont adaptées pour le web.
  Utilizez le compte-gouttes pour selectionner n'importe qu'elle couleur du bureau.
• Cliquez sur le bouton du compte-gouttes adapté pour le web pour limiter la sélection aux couleurs adaptées pour le web. Lorsque cette option est activée, la couleur sélectionnée s'aligne sur la couleur adaptée pour le web la plus proche.

• Cliquez sur le bouton de l'effaceur pour effacer la couleur actuelle sans la replacer par une autre.
• Cliquez sur le bouton Palette pour ouvrir le selectionneur de couleur du système. Ces couleurs ne sont pas limités aux couleurs adaptées pour le web.

À propos des couleurs adaptées pour le web

Dans les documents HTML, les couleurs sont exprimées soit par des valeurs hexadécimales (par exemple, #FF0000) soit par des noms (rouge). Les couleurs communes à Netscape Navigator et Microsoft Internet Explorer tant sous Windows que sur Macintosh en mode 256 couleurs sont des couleurs adaptées pour le web. Par convention, il y a 216 couleurs communes, et toute valeur hexadécimale combinant les codes 00, 33, 66, 99, CC ou FF (correspondant respectivement aux valeurs RVB 0, 51, 102, 153, 204 et 255) représentée une couleur adaptee pour le web.

Des tests ont cependant révélé qu'il n'y a en réalité que 212 couleurs qualifiables d'adaptées pour le web. Internet Explorer sous Windows ne rend pas correctement les couleurs #0033FF (0,51,255), #3300FF (51,0,255), #00FF33 (0,255,51) et #33FF00 (51,255,0).

Tous les selecteurs de couleur de Dreamweaver utilisent la palette de 212 couleurs adaptées pour le web. Lorsque vous selectionnez une couleur dans la palette, le programme en affiche la valeur hexadécimale. Bien que les quatre couleurs précités ne figurent pas dans la palette de Dreamweaver, vous pouvez modifier manuellement la valeur hexadécimale de n'importe quel champ de manière à lui attribuer la couleur de votreCHOIX.

Pour désir une couleur ne figurant pas dans la gamme des couleurs adaptées pour le web, cliquez sur le bouton Palette dans le coin inférieur droit pour ouvrin le selectionneur de couleur du système.

Les versions UNIX de Navigator utilisent une palette de couleurs différentes de celle des versions Windows et Macintosh. Si vous développpez exclusivement pour des plates-formes UNIX (ou si vous public cible est constitué d'utilisateur de Windows ou Macintosh équipés de moniteurs 24 bits et d'utilisateurs d'UNIX équipés de moniteurs 8 bits), songez à utiliser des valeurs hexadécimales combinant les paires 00, 40, 80, BF ou FF, qui produit des couleurs adaptées pour le web sur les machines tournant sous SunOS.

Déterminé le code HTML des caractères et des polices utilisés pour afficher le document.

Affichage et édition du contenu de l'EN-TÊTE

Les fichiers HTML complrennent deux sections principales : l'EN-TÉTE et le CORPS. Le CORPS est la partie du document que l'utilisateur peut voir dans la fenêtre d'un navigateur (et dans la fenêtre Document de Dreamweaver). L'EN-TÉTE est généralement invisible, à l'exception du TITRE, qui s'inscrit dans la barre de titre tant dans le navigateur que dans la fenêtre Document et est utilisé comme libellé pour les signets du document.

L'EN-TÉTE contient des informations importantes en plus de celle du TitRE, notamment le type de document, le langage d'encodage, les fonctions et variables JavaScript et VBScript, et autres mots clés et indicateurs de contenu pour permettre la détéction par les moteurs de recherche. Vous pouvez afficher les éléments de l'EN-TÉTE à l'aide du menu Affichage ou de linspecteur HTML.

Pour afficher les éléments de l'EN-TÉTE d'un document :

• Choisissez Affichage > Contenu de l'en-tête. Pour chaque élément de l'ENTÉTE, une icône s'affiche dans le haut de la fenêtre Document.

Pour insérer des éléments dans l'EN-TÉTE d'un document :

1 Choisissez En-tete dans le menu contextuel en haut de la palette d'objects.
2 Cliquez sur l'un des boutons de la palette d'objects.
3 Entrez les options applicables à l'objet dans la boite de dialogue qui s'affiche ou dans l'inspecteur de propriétés.

Pour modifier des éléments de l'EN-TÉTE d'un document :

1 Cliquez sur l'une des icones de la zone de l'en- 電 e pour la selectionner.
2 Définissez ou modifie les propriétés de l'élement dans l'inspecteur de propriétés.

Pour plus d'informations sur les propriétés de certains éléments d'EN-TÉTÉ spécifiques, consultez les rubriques suivantes dans les pages d'aide de Dreamweaver :

Propriétés META
Propriétés du titre
Propriétés des mots clés
Propriétés de la description
Propriétés d'actualisation
Paramétrage des propriétés de script
Propriétés de la base
Propriétés du lien

CHAPITRE 5

Utilisation des modèles

Modèles – Vue d'ensemble

Les modèles vous permettent de creer, pour votre site, des documents ayant une structure et une appearance communes. Les modèles sont utiles si vous voulez que toutes les pages d'un site partagent certaines caractéristiques, qu'il s'agisse de la création d'un nouveau site ou de la mise à jour d'un site existant. Plutôt que de définir les propriétés correctes pour chaque nouvelle page ou d'apporter des modifications séparément à chaque page, les modèles vous permettent d'apporter des modifications à plusieurs pages à la fois.

Lorsque vous creez un modele, vous pouvez indiquer les éléments de la page qui doivent rester constants (non modifiables) et leurs qui peuvent changer. Par exemple, si vous publiiez un magazine en ligne, il est probable que l'ours ne changera pas. En revanche le titre et le contenu de l'editorial changeront a chaque édition. Pour indiquer le style et l'emplacement de l'editorial, vous pouvez utiliser un espace de texte réservé et le définir comme région modifiable. Pour ajouter un nouvel éditorial, le réducteur sélectionne simplement l'espace réservé et y tape son article.

Voupez modifier un modele, meme apres I'avoir utilise pour creer des documents. Lorsque you mettez des documents a jour en utilisant leur modele, les sections non modifiables de ceux-ci sont mises a jour en fonction des modifications apportees au module.

Creation des modèles

Vou puevez creer un modele à partir d'un document HTML existant, puis le modifier pour qu'il réponde à vos besoin, ou créer un modele à partir de rien, en commençant par un document HTML vierge.

Les modèles sont automatiquement stockés dans le sous-repertoire Templates du repertoire racine local du site. Le cas échéant, lorsque vous creez un nouveau modele, le repertoire Templates est créé s'il n'exist pas encore.

Pour enregistrer un document existant comme modele:

1 Choisissez Fichier > Ouvrir, puis selectionnez un document existant.
2 Choisissez Fichier > Enregister comme modele.
3 Dans la boîte de dialogue qui s'affiche, Sélectionnéz un site et tapez un nom pour le modèle dans le champ Enregistrer sous.
4 Cliquez sur Enregistrer.

Pour creer un nouveau modele vide :

1 Choisissez Fenetre > Modèles.
2 Dans la palette des modeles, cliquez sur Nouveau.

Un nouveau modele, sans titre, est ajoute à la liste de modèles de la palette.

3 Tandis que le modele est encore selectionné, tapez un nom.

Pour modifier un modele,procedede l'une des manieres suivantes：

1 Choisissez Fenetre > Modèle.
2 Dans la palette des modèles, double-cliquez sur le nom du modele.

Paramétrage des propriétés de page du modele

Les propriétés de page du modele contrôlent toutes les options du document à l'exception du titre de la page. Pour tout document utilisant un modele, les changements à ses propriétés de page (à l'exception du titre) sont ignorés. Pour charger les propriétés d'une page après qu'un modele lui a été appliqué, modifier les propriétés de page du modele, puis mettez à jour les pages auxquelles il est appliqué. Voir Modification des modèles et mise à jour du site, page 101.

Pour définir les propriétés de page du modele :

1 Ouvrez le modele et choisissez Modifier > Propriétés de la page.
2 Spécifiez les options souhaitées pour la page, puis cliquez sur OK.

Pour en savoir plus sur les propriétés de page, consultez les pages d'aide de Dreamweaver.

Définition des régions modifiables d'un modele

Un modele comprend deux types de régions : modifiables et verrouillées (non modifiables). Les régions modifiables sont les sections du modele dont le contenu est changeant, telles qu'un article de bulletin d'informations. Les régions verrouillées sont les sections du modele dont le contenu est statique, non changeant, telles qu'un logo ou des éléments standard de navigation sur le site.

Par défaut, les modèles sont verrouillés. Vous pouvez y ajouter du contenu mais, lorsque vous l'enregistrez, tout le contenu est marqué comme non modifiable. Si vous créez un document à partir d'un tel modele, Dreamweaver vous avertit que le document ne contienda pas de régions modifiables. Pour qu'un modele soit utile, vous doivent creer des régions modifiables, marquer le contenu existant comme modifiable, ou ajouter du contenu et le marquer comme modifiable.

Pendant que vous editez le modele lui-même, vous pouze apporter des modifications aux régions tant modifiables que verrouillées. En revanche, une fois le modele appliqué à un document, vous ne pouze plus modifier que les régions modifiables du document; les régions verrouillées ne sont plus modifiables.

Pourdéfiniruncontenuexistant commeégion modifiable：

1 Sélectionnez le texte ou le contenu que vous pouze rendre modifiable.
2 Choisissez Modifier > Modèles > Marquer la sélection comme modifiable.
3 Dans la boîte de dialogue Nouvelle région modifiable, tapez un nom pour la région.

Le texte ou le contenu apparaît en surbrillance dans le modele.

Vous pouvez marquer comme modifiable un tableau tout entier aussi bien qu'une seule cellule de tableau. En revanche, vous ne pouvez pas marquer plusieurs cellules comme modifiables en une fois. Les calques et leur contentu sont des éléments séparés pouvant tous deux être marqués comme modifiables. Le fait de marquer un calque comme modifiable vous permet d'en modifier la position ; le fait de marquer son contentu comme modifiable vous permet d'en modifier le contentu.

Pour définir une nouvelle région modifiable :

1 Placez le curseur à l'endetroit où vous pouvez insérer une région modifiable.
2 Choisissez Modifier > Modèles > Nouvelle région modifiable.
3 Dans la boîte de dialogue Nouvelle région modifiable, tapez un nom pour la région.

Le nom de la région, entoure d'accollades comme dans {nom de la région}, est inséré dans le modele sous la forme d'un espace réservé en surbrillance.

Lorsque le modele est appliqué à un document, vos pouvez replacer l'espace réservé par du texte, des images ou tout autre contenu.

Remarque: Les caractères suivants ne sont pas valides pour les noms de région : apostrophes (), guillemets (), crochets pointus (< >) et perluêtes (&).

Configuration des préférences pour les modèles

Vou puez personnaliser les couleurs de surbrillance des régions modifiables et verrouillées d'un modele dans les préférences pour la surbrillance. La couleur de la région modifiable apparait dans le modele lui-même. La couleur de la région verrouillée apparait dans les documents utilisant le modele.

Pour modifier les couleurs de surbrillance d'un modele:

1 Choisissez Édition > Préférences, puis Sélectionnéz Surbrillance.
2 Cliquez sur la case couleur Régions modifiables, puis selectionnez une couleur de surbrillance. Procedez de même pour les régions verrouillées.
3 Activez l'option Afficher pour afficher ces couleurs dans la fenetre Document.
4 Cliquez sur OK.

Pour afficher les couleurs de surbrillance dans la fenetre du document :

• Choisissez Affichage > Éléments invisibles.

Les couleurs de surbrillance ne s'affichent dans la fenêtre du document que lorsque l'option Affichage > Éléments invisibles est activée.

Affichage de régions modifiables et verrouillées

Les régions modifiables et verrouillées apparaisent dans la fenêtre Document comme du texte et des objets en surbrillance. Pour plus d'informations sur le paramétrage des préférences pour la surbrillance, voir Configuration des préférences pour les modèles, page 94.

Dans les modèles, les régions modifiables sont en surbrillance. Vous pouvez cependant apporter des modifications aux éléments de contenu tant modifiables que verrouillés.

Dans les documents utilisant des modèles, les régions verrouillées sont en surbrillance. Vous ne pouvez apporter des modifications qu'au contenu modifiable (non en surbrillance).

Affichage de codes HTML modifiables et verrouillés

Le contenu modifiable est délimité dans le code HTML par des commentaires de Dreamweaver #BeginEditable et #EndEditable. Le code HTML pour un espace réservé modifiable nommé région modifiable représentait l'aspect suivant :

<!-- #BeginEditable "Edit-Region" -->
{région modifiable}
<!-- #EndEditable -->
Le code HTML d'un tableau modifiable nommé Edit-Table générait l'aspect suivant :
<!-- #BeginEditable "Edit-Table" -->
<table width="77%" border="1">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
<!-- #EndEditable --> 

Pour les modèles, les régions modifiables sont en surbrillance dans la fenêtre HTML. Vous pouvez cependant apporter des modifications au code source HTML tant modifiable que verrouillé.

Pour les documents utilisant des modèles, les régions verrouillées apparaissent en surbrillance dans la fenêtre HTML. Vous ne pouvez apporder de modifications qu'au code source HTML modifiable (non en surbrillance).

Annulation du marquage d'une région

Si vous marquez une région comme modifiable et souhaitez ensuite la rendre non modifiable (la verrouiller), utilisez la commande Rendre la région non modifiable.

Pour ne plus marquer une région (la rendre non modifiable):

1 Choisissez Modifier > Modèles > Rendre la région non modifiable.
2 Sélectionnez le nom de la région dans la liste, puis cliquez sur OK.

La région est verrouillée.

Utilisation de styles, de scénarios et de comportements dans des modèles

Les styles, scénarios et comportements personalisés sont totalement pris en charge par les modèles. Cependant, tout document utilisant un modèle ne peut pas avoir sa propre feuille de style, ni ses propres scénarios ou comportements ; il doit utiliser une feuille de style, des scénarios et des comportements définis pour le modele. Ceci est d'au fait que les styles, les scénarios et les comportements comprehennent tous des composants dans la section HEAD du document, qui n'est pas modifiable dans les documents basés sur des modèles.

Les styles, scénarios et comportements ne peuvent être appliqués qu'aux régions modifiables d'un document basé sur un modèle. Pour plus d'informations sur l'utilisation des styles, voir Formatage du texte avec des feuilles de style, page 174. Pour plus d'informations sur les scénarios et les comportements, voir Ajout d'interaktivité et d'animation - Vue d'ensemble dans les pages d'aide HTML de Dreamweaver.

Utilisation de la palette de modèles

Utilisez la palette des modèles pour creer de nouveaux modèles et:gérer les modèles existants.

Pour ouvrir la palette des modèles :

Choisissez Fenetre Modèles.

Le volet supérieur de la palette des modèles affiche la liste de tous les modèles disponibles pour le site. Le volet inférieur affiche le contenu du modele sélectionné.

Pour modifier un modele:

• Sélectionnez un modèle dans la liste et cliquez sur Ouvrir, ou double-cliquez sur le nom du modèle dans la liste.

Pour renommer un modele:

• Cliquez une fois sur le nom du modele selectionné. Lorsque le nom devient un champ modifiable, entrez un nouveau nom.

Lorsque vous renommez un modele,les reférences à celui-ci ne sont pas automatiquement mises à jour. Pourmettre à jour la reférence,vousdevez appliquer le modele renommé à un document.VoirCreation de documents basés sur des modèle,page 100.

Creation de documents basés sur des modèles

Yououpouvezutiliserunmodèle comme point dedepart pour un nouveau document ou l'appliquer à undocument existant.

Pour creer un nouveau document basé sur un modele, procedez de l'une des manieres suivantes :

• Choisissez Fichier > Nouveau à partir d'un modele. Dans la boîte de dialogue qui s'affiche, Sélectionnéz un modele, puis cliquez sur Sélectionner.
  Creez un nouveau document, puis appliquez-lui un modele de la palette des modeles en le faisant glisser.

Pour appliquer un modele à un document existant,procédez de l'une des manières suivantes:

• Choisissez Modifier > Modèles > Appliquer le modèle à la page. Sélectionné un modèle dans la liste, puis cliquez sur Sélectionner.
• Faites glisser le modele de la palette vers la fenetre Document.
  Sélectionnez le modele dans la palette, puis cliquez sur Appliquer à la page.

Lorsque vous appliquez un modele à un document existant, le contenu du modele est ajoute au document.

Si le document est déjà basé sur un modèle, Dreamweaver essaie d'étabrir une correspondance entre les régions modifiables portant le même nom dans les deux modèles, et d'insérer le contenu des régions modifiables du modele précédent dans les régions modifiables du nouveau.

Si certaines régions modifiable ne correspondant pas ou si une région modifiable du modele precedent n'a pas d'equivalent dans le nouveau modele, une boîte de dialogue vous invite à supprimer les régions superflues ou à les transférer dans le nouveau modele. S'il y a d'autres régions modifiables dans le nouveau modele, elles apparaitront dans les documents comme des espaces réservés.

Recherche des régions modifiables d'un document

Toutes les régions modifiables du corps d'un modele sont répertoriées dans la liste figurant au bas du menu Modifier > Modèles. Utilisez cette liste pour sélectionner et modifier les régions.

Pour rechercher une région modifiable et la sélectionner dans le document :

• Choisissez Modifier > Modèles, puis sélectionnez le nom de la région dans la liste.

La région est seLECTIONnée dans le document. Commencez à taper pour remplancer le contenu de la région.

Détachment d'un document d'un modele

Pour apporter des modifications aux régions tant modifiables que verrouillées d'une page utilisant un modèle, vous doivent commencer par détacher la page du modulo. Cela fait, vous pouvez modifier la page comme si aucun modulo ne lui avait été appliqué. En revanche, la page ne sera plus mise à jour en cas de modification du modulo.

Pour détacher un document d'un modele :

• Choisissez Modifier > Modèles > Detacher de NomDuModèle.dwt.

La page est détachée du modele et toutes les régions deviennent modifiables.

Modification des modèles et mise à jour du site

Lorsque vous apportez des modifications à un modèle que vous utilisez dans le site en cours, Dreamweaver vous invite àmettre à jour les pages utilisant ce modele. Vous pouvez également utiliser les commandes de mise à jour pourmettre manuellement à jour la page courante ou le site tout entier. L'application des commandes de mise à jour a le même effet que la réapplication du modele.

Pour ouvrir le modeleutilisepourcrierledocumenten cours:

Choisissez Modifier Modèles Ouvrir NomDuModèle.dwt.

Pourmettreàjourledocumentencoursurla base de la versionla plus récented'un modèle:

• Choisissez Modifier > Modèles > Mettre à jour la page en cours.

Pourmettreàjourlesiteentierou tous les documentsutilisantun module particulier：

1 Choisissez Modifier > Modèles > Mettre à jour les pages.

La boîte de dialogue Mettre à jour les pages s'affiche.

2 Dans l'option Regarder dans, procedede l'une des manieres suivantes :

• Sélectionnez Site entier, puis Sélectionnez le nom du site. Cette opération met à jour toutes les pages du site sélectionné en se basant sur leur modele.
• Sélectionnez Fichiers utilisant, puis sélectionnez le nom du modele. Cette opération met à jour toutes les pages du site en cours qui se basent sur le modele sélectionné.

Remarque: Si vous avez renommé un modèle, vous nevez commencer par le réappliquer à tous les documents y faisant reféquence avant demettre à jour le site tout entier. Voir Utilisation de la palette de modèles, page 99.

3 Dans la rubrique Mettre à jour, assurez-vous que l'option Modèles est activée.
4 Cliquez sur Demarrer.

Importation et exportation de contenu XML

Utilisez les fonctions d'importation et d'exportation XML pour séparer les régions modifiables des régions verrouillées dans les documents utilisant des modèles, ou pour fusionner les régions modifiables d'un document avec un modele existant.

Ceci permet d'exporter du contenu modifiable et de le modifier, ou de développer du contenu en dehors de Dreamweaver.

Pour exporter les régions modifiables d'un document sous XML :

1 Choisissez Fichier > Ouvrir, puis ouvrez un document basé sur un modele (et contenant des régions modifiables).
2 Choisissez Fichier > Exporter > Exporter les régions modifiables sous XML.
3 Dans la boîte de dialogue XML qui s'affiche,CHOISSEZ une notation de balise, puis cliquez sur OK.

Pour plus d'informations sur les notations de balise, voir À propos des notations de balises XML, page 103.

4 Dans la boite de dialogue qui s'affiche, tapez un nom pour le fichier XML, puis cliquez sur Enregister.

Lorsque vous exportez un document, le fichier XML ainsi génére contient le nom du modele sur lequel le document est basé, de même que les noms de toutes les régions modifiables.

Pour importer du contentu XML :

1 Choisissez Fichier > Importer XML dans le modele.
2 Sélectionnez le fjichier XML, puis cliquez sur Ouvrir.

Une fois le fjichier XML importé, Dreamweaver en fusionne le contenu XML avec le modèle spécifique dans le fjichier XML et affiche le résultat dans la nouvelle fenêtre Document. S'il ne trouve pas le modèle spécifique, Dreamweaver vous invite à selectionner le modele à utiliser.

À propos des notations de balises XML

Dreamweaver yous permit d'exporter du contenu à l'aide de l'une des deux notations de balises : les balises de nom de région modifiable ou les balises XML standard. Le choix du type de notation dépend de la manière dont le contenu XML est incorpore dans le site Web.

Le code XML suivant a eté exporté d'un document sur la base d'un modele nommé newtemplate. Le document présente une seule région modifiable, nommée Edit-Region.

• Les balises de nom de région modifiable utilisent les noms de région. Dans cet exemple, la balise doit identifier le titre du module et la balise Edit-Region identifie la région modifiable.

<doctitle>
    <![CDATA [<titre>modèleInfos</title>]">
</doctitle>
<Edit-Region>
    <![CDATA[{Edit-Region}]">
</Edit-Region> 

• Les balises XML standard de Dreamweaver utiliser la balise item name. Dans cet exemple, item name="doctitle" et item name="Edit-Region" sont utilisés pour identifier le titre du modele et la région modifiable.

<item name="doctitle">
    <![CDATA[ <title>modeleInfos</title>]">
</item>
<item name="Edit-Region">
    <![CDATA[{Edit-Region}]">
</item>
</item> 

CHAPITRE 6

Planification du site

Planification du site – Vue d'ensemble

Un site est un emplacement de stockage des documents appartenant à un site Web. Les sites peuvent résider sur serveur local ou distant. Pour prendre Dreamweaver en main, vous doivent commencer par创建工作 un site local. Voir Creation d'un site local, page 106.

Une fois le site local créé, utilisez des liens pour relier les documents du site entre eux, à des documents figurant sur des sites distants, ou à des adresses ou scripts e-mail. Voir Création de liens, page 107

Pour vous aider à gérer le site, Dreamweaver affiche son contenu, soit comme une liste de fichiers, soit comme une carte. Vous pouvez utiliser cette carte du site pour creer rapidement et afficher des prototypes de vos sites. Voir Travail avec les fichiers du site, page 117 et Création de cartes de site, page 118.

Creation d'un site local

Un site local requiert un nom et un réseau racine local indiquant à Dreamweaver l'emplacement où vous souhaitez conserver les fichiers du site. Vous nevez creer un site local pour chaque site Web sur lequel vous travailliez.

Plus tard, lorsque vous serez prét à publier et tester le site sur un serveur distant, vous pourrez ajouter des informations sur le site. Pour plus d'informations sur les sites distants, voir Définition d'un site, page 128.

Pour creer un site local :

1 Choisissez Site > Nouveau site.
2 Dans la boîte de dialogue Définition du site, Sélectionnez l'optionInfos locales dans la liste Catégorie.
3 Entre les options suivantes :

Nom du site identifie le site. Le nom du site apparait dans la fenetre Site et dans le sous-menu Site > Ouvrir site.

Dossier racine local spécifique le dossier du disque dur où seront stockés les fichiers, modèles et éléments de bibliothèque du site. Lorsque Dreamweaver résout des liens relatifs à la racine, c'est par rapport à ce dossier qu'il fait. Tapez un chemin d'accès ou cliquez sur l'icone de répertoire pour naviguer vers un filchier et le selectionner.

Adresse HTTP identifie l'URL du site de sorte que les liens au sein du site qui utilisent des URL absolues peuvent être vérifiés. Voir Vérification des liens entre documents, page 149.

Cache create un cache local pour améliorer la vitesse des tâches de gestion des liens et du site. Si vous ne sélectionnez pas cette option, Dreamweaver vous demandera de nouveau de créé un cache avant de créé le site.

4 Cliquez sur OK.

Creation de liens

Les liens sont des connexions avec des documents de votre site ou d'autres sites Web. Vous pouvez creer des liens dans la fenetre Document à l'aide de l'inspecteur de propriétés ou du menu Modifier.

Dreamweaver permet de creer des liens de plusieurs façon :

Utilisez l'icone Pointer vers un fisquier pour pointer vers le fisquier avec lequel vous poulez étabir le lien. Voir Création de liens avec l'icone Pointer vers un fisquier, page 108.
Utilisez l'inspecteur de propriétés pour creer des liens de façon plus traditionnelle en tapant un chemin d'accès vers un fichier ou en naviguant vers le fichier sur le disque. Voir Établissement d'un lien vers un document, page 110.
Utilisez des ancre nommées pour sauter vers certains endroits d'un document. Voir Établissement d'un lien vers une ancre nommée, page 111.
Utilisez des liens e-mail, nowhere et script pour ouvrir des programmes de messagerie electronique et avoir accès à des événements JavaScript ou pour executer un code JavaScript. Voir Création de liens e-mail, nowhere et script, page 112.
- Vous pouvez également utiliser la carte du site pourisser des liens. Voir Création et modification de liens dans un affichage de carte de site, page 123.
Utilisez la fenêtre Document ou un navigateur pour tester tous les liens. Voir Test des liens, page 113.

Avant de creer des liens, soyez certain de comprendre la différence entre un chemin d'accès relatif et un chemin d'accès absolu et la maniere de désigner chaque type de chemin. Voir A propos des chemins relatifs et absolus, page 114.

Création de liens avec l'icone Pointer vers un fichier

Creez des liens à l'aide de l'icone Pointer vers un fichier afin de pointer vers un autre document ouvert, un fichier figurant dans la fenêtre Site ou une ancre visible dans un document ouvert. L'icone Pointer vers un fichier s'affiche dans l'inspecteur de propriétés et dans la carte du site lorsque vous sélectionnez un fichier. Elle s'affiche également lorsque vous faites glisser une seLECTION tout en tenant la touche Maj enforcée.

Pour étabir un lien vers un document à l'aide de l'icone Pointer vers un fichier dans l'inspecteur de propriétés :

1 Sélectionnéz du texte ou une image dans la fenêtre Document.
2 Faites glisser l'icone Pointer vers un fichier de l'inspecteur de propriétés et pointez vers un autre document ouvert, une ancre visible dans un document ouvert ou un fichier dans la fenêtre Site.

Le champ Lien est mis à jour pour indiquer le lien.

3 Relâchéz le bouton de la souris pourcréer le lien.

Glissement de l'icone Pointer vers un fichier de l'inspecteur de propriétés vers un fichier de la fenêtre Site.

Pour creer un lien à partir d'une seLECTION dans un document ouvert :

1 Sélectionnez du texte dans la fenêtre Document.
2 Faites glisser la souris à partir de la seLECTION, en tenant la touche Maj enforcée.

L'icone Pointer vers un fichier s'affiche lorsque vous commencez à faire glisser la souris.

3 Pointez vers un autre document ouvert, une ancre visible dans un document ouvert ou un fjichier dans la fenetre Site.

4 Relâchez le bouton de la souris pour creer le lien.

Glissement de l'icone Pointer vers un fichier d'une seLECTION dans un document (en maintainant la touche Maj enforcée) vers un fichier dans la fenêtre Site.

Pour creer un lien depuis un fichier dans la carte du site :

1 Sélectionnez une page HTML dans la carte du site.

L'icone Pointer vers un fichier s'affiche a coto du fichier.

2 Faites glisser l'icone Pointer vers un fisier et pointez vers un autre document ouvert, une ancre visible dans un document ouvert ou un fisier dans la fenetre Site.

Glissement de l'icone Pointer vers un fichier depuis un fichier selectionné dans la carte du site vers un fichier de la vue des fichiers du site de la fenêtre Site.

Pour plus d'informations sur la création d'une carte du site, voir Création de cartes de site, page 118.

Établissement d'un lien vers un document

Utilisez l'inspecteur de propriétés pour lier une image ou une partie du texte du document en cours à un autre document.

Pour creer des liens entre documents :

1 Sélectionnez du texte ou une image dans la fenêtre Document.
2 Ouvrez l'inspecteur de propriétés (Fenêtre > Propriétés) et exécutez l'une des opérations suivantes :
Tapez un chemin dans le champ Lien.

Pour creer un lien vers un document de votre site, entrez un chemin relatif au document ou à la racine. Pour creer un lien vers un document situé en dehors du site, entrez un chemin absolu.

• Cliquez sur l'icone de réseau pour naviguer jusqu'à un fichier et le selectionner.
  Le chemin d'accès du filchier s'affiche dans le champ URL. Utilisez l'option Relatif à pour faire en sorte que le chemin soit relatif au document ou à la racine du site. Cliquez sur Sélectionner.
• Faites glisser un fichier de la fenêtre Site dans le champ Lien de l'inspecteur de propriétés.
  3 Pour faire en sorte que le document lie s'affiche ailleurs que dans la fenetre ou le cadre en cours, selectionnez un nom de cadre dans le menu dérouulant Cible ouCHOISSEZ l'une des cibles réservées suivantes:
• _blank Charge le document lié dans une nouvelle fenêtre de navigateur sans nom.
• _parent Charge le document liée dans le jeu de cadres parent ou la fenêtre du cadre contenant le lien. Si le cadre contenant le lien n'est pas imbiqué, le document lié se charge dans toute la fenêtre du navigateur.
  self Charge le document lie dans le même cadre ou la même fenêtre que le lien. Il s'agit de la cible par défaut, de sorte qu'il est le plus souvent inutile de la spécifique.
• _top Charge le document lié dans toute la fenêtre du navigateur, en effaçant tous les cadres.

Établissement d'un lien vers une ancre nommée

Les ancre nommées marquent des positions spécifiques dans un document. Utilisez des ancre nommées pour sauter à une position marquee dans le document en cours ou pour creer un lien vers une position marquee dans un autre document.

Pour creer une ancre nommée :

1 Dans la fenêtre Document, placez le curseur là où vous pouze insérer l'ancre nommée.
2 Procedez de l'une des manieres suivantes:
- Choisissez Insertion > Ancre nommée.
- Choisissez Fenêtre > Objects, Sélectionné Invisibles dans le menu dérouulant en haut de la palette d'objets, puis cliquez sur le bouton Ancre.
3 Dans la boite de dialogue qui s'affiche, tapez un nom pour l'ancre. Si le marqueur d'ancre ne s'affiche pas à l'emplacement du curseur,CHOISSE AFFICHAGE > Éléments invisibles.

Pour creer un lien vers une ancre nommée :

1 Sélectionnez du texte ou une image dans la fenêtre Document.
2 Dans l'inspecteur de propriétés, tapez le signe dièse (#) et le nom de l'ancre dans le champ Lien. Par exemple :
Pour creer un lien vers une ancre nommée "deux" du fichier en cours, tapez #deux.
Pour creer un lien vers une ancre nommée "deux" dans un autre fichier figurant dans le même repertoire, tapez NomDuFichier.html#deux.

Pour creer un lien vers une ancre nommée à l'aide de la methode Pointer vers un fichier :

1 Choisissez Affichage > Éléments invisibles pour rendre l'ancre visible.
2 Sélectionnez du texte ou une image dans la fenêtre Document.
3 Procedez de l'une des manieres suivantes:

• Cliquez sur l'icone Pointer vers un fisier dans l'inspecteur de propriétés et faites-la glisser vers l'ancre avec laquelle vous pouze créé un lien ; il peut s'agir d'une ancre située soit à l'intérieur du même document, soit dans un autre document ouvert.
• Cliquez sur la fenêtre Document en tenant la touche Maj enforcée et faites-la glisser vers l'ancre avec laquelle vous voulez creator un lien ; il peut s'agir d'une ancre située soit à l'intérieur du même document, soit dans un autre document ouvert.

Creation de liens e-mail, nowhere et script

Les types de lien les plus courants sont ceux qui reivoient à des documents et des ancre nommées (décrits respectivement dans Établissement d'un lien vers un document, page 110 et Établissement d'un lien vers une ancre nommée, page 111), mais il en existe d'autres.

Les liens de messagerie ouvrent de nouvelles fenêtres de message (à l'aide du programme de messagerie associé au navigateur de l'utiliste) chaque fois que l'utiliste clique dessus. Le champ A: de la fenêtre du message est automatiquement complété par l'adresse spécifique dans le lien.

Pour creer un lien de courrier electronique :

1 Sélectionnez du texte ou une image dans la fenêtre Document.
2 Dans l'inspecteur de propriétés, tapez mailto:, suivi par une adresse e-mail dans le champ Lien.

3 Appuyez sur Entrée.

Les liens Nowhere font exactement ce que leur nom laisse entendre : ils ne sont nulle part. De tels liens sont utiles pour acceder à des événements JavaScript disponibles pour des liens mais non pour du texte ou des images, sans écarter l'utilisateur de la page en cours. Par exemple, dans la plupart des navigateurs, les images ne reconnaissent par l'évenement onMouseOver. C'est pourquoi vous devez entourer les images de liens nowhere pour implémenter les mises en surbrillance de défillement (dans Dreamweaver, le comportement Permutation d'image le fait automatiquement).

Pour creer un lien nowhere :

1 Sélectionnez du texte ou une image dans la fenêtre Document.
2 Dans l'inspecteur de propriétés, tapez un signe dièse (#) dans le champ Lien.
3 Appuyez sur Entre

Les liens script exécutent un code JavaScript ou appelant une fonction JavaScript et sont utiles pour fournir aux utilisateurs des informations supplémentaires sur un élément sans quitter la page en cours. Les liens script peuvent également être utilisés pour executer des calculs, modifier des formulaires et executer d'autres tâches de traitement lorsqu'un utilisateur clique sur un élément spécifique.

Pour creer un lien script :

1 Sélectionnez du texte ou une image dans la fenêtre Document.
2 Dans le champ Lien de l'inspecteur de propriétés, tapez javascript:, suivi par un code JavaScript ou un appel de fonction JavaScript.

Par exemple, le fait de taper javascript:alert('Cette fonction n'est pas implémentée') dans le champ Lien create un lien qui affiche une fenêtre d'alerte JavaScript avec contenant le message Cette fonction n'est pas implémentée.

Remarque: Du fait que le code JavaScript s'affiche entre guillemets ( comme valeur de l'attribut HREF), vous doivent utiliser des apostrophes dans le code du script ou échapper les guillemets en les faisant précéder de barres obliques inversées (par exemple, "Cette fonction n'est pas implémentée\").

Test des liens

Certains liens ne sont pas actifs dans la fenêtre Document (c'est-à-dire que le fait de cliquer dessus ne fait pas acceder au document lie) parce que vous devez être en mesure de cliquer sur un lien pour modifier le texte ou les images qui y sont associés. Vous pouvez ouvrir le fjichier associé à un lien dans Dreamweaver si vous poulez le modifier mais vous devez tester les liens dans un navigateur. Voir Test du site, page 147.

Pour tester les liens dans un navigateur :

• Choisissez Fichier > Aperçu dans le navigateur.

Pour ouvrir des documents liés dans Dreamweaver, précédez de l'une des manières suivantes :

Sélectionnez le lien et choisissez Modifier > Hyperlien > Ouvrir la page liée.
Appuyez sur CTRL (Windows) ou Commande (Macintosh), puis double-cliquez sur le lien.

Remarque: Le document lié doit résider sur le disque local.

À propos des chemins relatifs et absolus

Il y a trois types de chemins d'accès : chemins absolus, chemins relatifs à la racine et chemins relatifs au document. Les chemins sont entrés dans le champ Lien de l'inspecteur de propriétés ou dans le champ URL de la boîte de dialogue Sélectionner fjichier HTML (accessible depuis l'inspecteur de propriétés). Voir Établissement d'un lien vers un document, page 110.

Chemins absolus Il s'agit de chemins complets complenant le protocole du serveur (ordinairement http:// pour les pages Web). Par exemple, http://www.macromedia.com/dreamweaver/. Les chemins absolus restent précis, quel que soit l'emplacement du document source. En revanche, ils nelient pas correctement le document cible en cas de déplacement de ce dernier. Vousdezutiliser un chemin absolu lorsque vous creez un lien vers un fichier situé en dehors du site courant.

Chemins relatifs à la racine Commencent toujours à la racine du site courant. Tous les fichiers du site visibles pour le public sont contenus dans la racine du site. Les chemins relatifs à la racine commencent par une barre oblique, indiquant au serveur de commencer à partir de la racine. Par exemple, le chemin /dreamweaver/ intro.htm create un lien avec un document nommé intro.htm dans le repertoire de Dreamweaver, qui se trouve au niveau de la racine du site.

Un chemin relatif à la racine est ordinairement la meilleure manière de lien des fichiers dans un environnement dont le contenu doit être féquèment déplaced. Lorsque vous utilisez des chemins relatifs à la racine, les liens continuent à fonctionner même si le document à partir duquel vous établissez le lien est déplace à l'intérieur du site. Les chemins relatifs à la racine ne convennent pas pour les sites à consulter localement (teils que les presentations). À leur place, utilisez des chemins relatifs au document.

Lorsque vous travailliez avec Dreamweaver sur un disque local, vous définissez un site local en sélectionnant un réseau qui serve d'équivalent à la racine du document sur un serveur. Dreamweaver utilise ce réseau pour localiser tous les liens renvoyant à des fichiers locaux spécifique comme URL relatives à la racine. Les liens relatifs à la racine ne fonctionnent pas tant que vous n'avez pas enregistré le document dans un site local. Pour définiir un site local,CHOISSEZ Site > Définir les sites.Voir Creation d'un site local, page 106.

Remarque: Le contenu lié avec un chemin d'accès relatif à la racine n'apparait pas lorsque vous prévisualisez des documents sur un navigateur local. Cela est d'au fait que les navigateurs ne reconnaissent pas les racines de site (contrairement aux serveurs). Pour afficher l'aperçu d'un contenu lié par un chemin d'accès relatif à la racine, placez le fichier sur un serveur distant, puis affichez-le à partir de là.

Chemins relatifs au document Ils sont relatifs au réseau contenant le document en cours. Par exemple, document.htm désigne un document du réseau courant ; ../document.htm désigne un document du réseau au-dessus du réseau courant ; et docsshtml/document.htm désigne un document situé dans un réseau nommédocshtml à l'intérieur du réseau courant. Les chemins relatifs au document sontsoonvent les plus simples a utiliser pour creer des liens vers des fichiers qui seront:tousjours placés dans le même réseau que le document courant.

Remarque: Il est conseilé de toujours enregistrer un nouveau fichier avant de créé un chemin relatif au document car ce dernier n'est pas valide sans un point de départ bien défini. Si vous créez un chemin relatif au document avant d'enregistrer le fichier, Dreamweaver utilise un chemin absolu commençant par file:// jusqu'à ce que le fichier soit enregistré.

Affichage de fichier dans une fenêtre Site

Utilisez la fenêtre Site pour afficher des sites locaux et distants, en ajoutant ou en supprimant des documents du site, ou pour scenariser.

La fenêtre Site se compose de deux volets, d'une barre de séparation et d'une série de boutons de menu. Lorsque vous définissez les options de la fenêtre Site, Dreamweaver les conserve en mémoire et les utilisera la prochaine que vous ouvrière la fenêtre Site. Pour plus d'informations, voir Options de la fenêtre Site, page 130.

Affichage de sites locaux et distants

La fenêtre Site peut afficher le contenu des sites locaux et distants. Les sites locaux s'affichent comme une liste de fischiers, une carte visuelle ou les deux. Les sites distants s'affichent uniquement comme une liste de fischiers.

Pour afficher des fichiers de site, procedede l'une des manieres suivantes:

Choisissez Fenetre > Fichiers du site.
Dans la fenetre Site, cliquez sur le bouton Fichiers du site.

Le volet affichant les fichiers du site local est libellé "Répertoire local", tandis que le volet affichant les fichiers du site distant est libellé "Site distant".

Remarque: si vous consultez un site local auquel ne correspond aucun site distant, le volet "Site distant" est vide.

Pour afficher la carte du site, procedede de l'une des manieres suivantes :

Choisissez Fenetre > Carte du site.
- Dans la fenêtre Site, cliquez sur le bouton Carte du site, ou sur la flèche du bouton Carte du site pour sélectionner Carte et Fichiers.

Le volet affichant les fischiers du site local est libellé "Répertoire local", tandis que le volet affichant les fischiers du site distant est libellé "Navigation dans le site".

Pour afficher uniquement la carte du site :

• Cliquez sur la flèche du bouton de la carte du site, puis Sélectionnez Carte seulement.

Changement de l'affichage du site

Par défaut, le site distant (ou carte du site local) apparaît dans le volet de gauche et le site local dans le volet de droite. Vous pouvez inverser cet affichage.

Pour déterminer dans quels volets les sites local et distant s'affichent :

1 Choisissez Édition > Préférences pour ouvrir la boîte de dialogue Préférences et Sélectionnéz la catégorie Site FTP.
2 Procedez de l'une des manieres suivantes:
- Sélectionnez Fichiers locaux dans le menu Toujours afficher, puis désissez si vous voulez afficher les fichiers locaux dans le volet de gauche ou de droite de la fenêtre Site.

Le site local s'affiche ensuite dans le volet que vous avez selectionné, et le site distant (ou la carte du site) dans l'autre.

• Sélectionnez Fichiers distants dans le menu Toujours afficher, puis choisissez si vous voulez afficher les fichiers distants dans le volet de gauche ou de droite de la fenêtre Site.

Le site distant s'affiche ensuite dans le volet que vous avez selectionné, et le site local (ou la carte du site) dans l'autre.

Pour changer la zone d'affichage :

• Faites glisser la barre de séparation pour augmenter la zone d'affichage du volet de gauche ou de droite.
  Utilisez les barres de définition dans le bas des volets pour en faire défiler le contenu.
  Dans la carte du site, cliquez et faites glisser la flèche au dessus d'un fjichier pour changer la largeur de colonne.

Pour plus d'informations sur les préférences du site, voir Paramétrage des préférences pour les sites FTP, page 132.

Travail avec les fichiers du site

Utilisez l'affichage Fichiers du site pour afficher les sites local et distant comme des listes de fichiers, pour ajouter de nouveaux dossier ou fichiers à un site, ou pour actualiser les affichages d'un site après que des modifications aient été apportées.

Pour afficher les fichiers du site, procedede l'une des manieres suivantes :

• Choisissez Fenêtre > Fichiers du site pour ouvrir la fenêtre Site dans l'affichage Fichiers du site.
  Dans la fenêtre Site, cliquez sur le bouton Fichiers du site.

Pour ajouter un nouveau dossier à un site :

1 Choisissez Fichier > Nouveau dossier (Windows) ou Site > Affichage des fichiers de site > Nouveau dossier (Macintosh).
2 Sélectionnez et nommez le nouveau dossier.

Pour ajouter un nouveau fichier à un site :

1 Choisissez Fichier > Nouveau fichier (Windows) ou Site > Affichage des fichiers de site > Nouveau fichier (Macintosh).
2 Sélectionnez et nommez le nouveau fichier.

Pourmettreàjourl'affichageFichiersdu siteapresavoir apportedesmodifications：

• Choisissez Affichage > Actualiser Local (Windows) ou Site > Affichage des fichiers de site > Actualiser Local (Macintosh).
• Choisissez Affichage > Actualiser Distant (Windows) ou Site > Affichage des fichiers de site > Actualiser distant (Macintosh).

Lorsque vous travailliez avec des sites local et distant, vous pouvez déterminer quels fichiers ont été mis à jour. Ceci est utile lorsqu vous pouvez télécharger tous les fichiers plus récents du site local vers le site distant, ou télécharger tous les fichiers plus récents du site distant vers le site local.

Pour selectionner des fichiers locaux plus récents :

• Choisissez Affichage > Sélectionner Local plus récent (Windows) ou Site > Affichage des fichiers de site > Sélectionner Local plus récent (Macintosh).

Pour selectionner des fichiers distants plus récents :

• Choisissez Affichage > Sélectionner Distant plus récent (Windows) ou Site > Affichage des fichiers de site > Sélectionner Distant plus récent (Macintosh).

Pour plus d'informations sur le travail avec des sites locaux et distants, voir Utilisation du système d'archivage et d'extraction de fichiers, page 133.

Creation de cartes de site

Utilisez l'affichage de carte de site pour afficher les sites locaux comme une carte visuelle d'icones liées, pour ajouter des fischiers à un site ou pour ajouter, modifier ou supprimer des liens. L'affichage de carte de site est idéal pour la scénarisation. Vous pouvez à présent créé un prototype de la structure du site, puis créé une image imprimée de la carte du site.

Remarque: L'affichage de carte de site s'applique uniquement aux sites locaux. Si vous voulez créé la carte d'un site distant, copiez tout son contenu sur votre lecteur local

Pour afficher une carte du site, procedede l'une des manieres suivantes :

• Choisisse Fenêtre > Carte du site pour ouvrir la fenêtre Site.
  Dans la fenetre Site, cliquez sur le bouton Carte du site.

La page d'accueil du site est le point de départ de la carte. Si Dreamweaver ne peut pas déterminer qu'elle page du site courant est la page d'accueil, la boîte de dialogue Définition du site s'ouvre sur le panneau Mise en forme de la carte du site, et vous invite à sélectionner la page appropriée.

La carte du site affiche les fichiers HTML et autres pages sous la forme d'icone. Les liens sont affichés dans l'ordre dans lequel on les rencontres dans le code source HTML.

Le texte affché en rouge indique un lien brisé.
Le texte affché en bleu et marquéd'une icône en forme de globe indique un fichier sur un autre site ou un lien spécial (tel un lien d'adresse électronique ou de script).
Une coche de couleur verte indique un fichier extrait par vous.
^+ Une coche de couleur rouge indique un fichier extrait parquelqu'un d'autre.
Un cadenas indique qu'un fisier est en lecture seule (Windows) ou verrouillé (Macintosh).

Par défaut, la carte du site affiche la structure du site, avec une profondeur de deux niveaux, en commençant par la page d'accueil. Cliquez sur les signes plus et moins (Windows) ou sur la flèche d'agrandissement (Macintosh) à côté d'une page pour afficher ou cacher les pages liées au-delà du second niveau.

Par défaut, les fischiers cachés et les fischiers dépendants ne sont pas affichés dans la carte du site. Les fischiers marqués sont des fischiers HTML marqués comme tels. Les fischiers dépendants sont des éléments de contenu non HTML tels que des images, modèles, fischiers Shockwave ou Flash. Voir Modification de la mise en forme de la carte du site, page 120 et Affichage et masquage des fischiers de la carte du site, page 124.

Modification de la mise en forme de la carte du site

Utilisez les options de mise en forme de la carte du site pour personneliser son aspect. Vous pouvez specifier la page d'accueil, le nombre de colonnes affichées et s'il convient d'afficher les fichiers cachés et dépendants.

Pour modifier la mise en forme de la carte du site :

1 Ouvrez la boîte de dialogue Définition du site à l'aide d'une des méthodes suivantes :
- Choisissez Site > Définir les sites, puis Modifier. Sélectionné Mise en forme de la carte du site dans la liste Catégorie à gauche.
- Choisissez Affichage > Mise en forme (Windows) ou Site > Affichage de carte de site > Mise en forme (Macintosh).

2 Sélectionnéz l'une des options suivantes :

Page d'accueil désigne la page d'accueil de la carte du site. Si vous ne spécifie pas de page d'accueil (Dreamweaver ne pourrait pas trouver de filchier nommé index.html ou index.htm dans la racine), Dreamweaver vous invite à selectionner une page d'accueil lorsque vous ouvre la carte du site.

Nombre de colonnes définit le nombre de pages affichées par rangée dans la carte du site.

Largeur de colonne définit la largeur de colonne, exprimée en pixels, de la carte du site.

Étiquettes des icones détermine si les noms de filchier ou les titres de page s'affichent sous les icones dans la carte du site. Vous pouvez changer les noms de filchier et les titres de page à partir de la carte du site.

Afficher les fischiers marqués comme masqués affiche les fischiers HTML marqués comme cachés dans la carte du site. Si une page est cachée, son nom et ses liens s'affichent en italieque.

Afficher les fichiers dépendants affiche tous les fichiers dépendants dans la hierarchie du site. Un fichier dépendant est une image ou un autre élément de contenu non HTML charge par le navigateur en même temps que la page principale.

Travail avec des pages dans la carte du site

Lorsque vous travailliez dans la carte du site, vous pouvez seLECTIONner des pages, ouvrir une page pour l'éditer, ajouter de nouvelles pages au site,maker des liens entre fichiers et modifier le titre de la page.

Pour selectionner plusieurs pages, procedede l'une des manieres suivantes :

• Cliquez en tenant la touche Maj enforcée pour seLECTIONner plusieurs pages.
  En partant d'une partie vierge de l'affichage, faites glisser le curseur autour d'un groupe de fichiers pour les selectionner.
• Appuyez sur MAJ+CTRL (Windows) ou Maj-Commande (Macintosh), puis cliquez pour selectionner des pages non contiguës.

Pour ouvrir une page afin de l'editor, procédez de l'une des manières suivantes :

Double-cliquez sur le fichier.
- Sélectionnez le fjichier et choisissez Fichier > Ouvrir la sélection (Windows) ou Site > Ouvrir (Macintosh).

Pour ajouter un fjichier existant au site, procedez de l'une des manieres suivantes :

• Faites glisser un fjichier depuis Windows Explorer ou du Sélecteur Macintosh et déposez-le sur un fjichier de la carte du site. La page est ajoutée au site et un lien est créé entre elle et le fjichier que vous avez déposé dessus.
• Choisissez Site > Lier au fichier existant (Windows) ou Site > Affichage de carte de site > Lier au fichier existant (Macintosh).
• Cliquez sur un fisquier dans la carte du site. L'icone Pointer vers un fisquier s'affiche. Cliquez sur l'icone et faites-la glisser vers le fisquier que vous pouze ajouter.

Pour creer un nouveau fichier et ajouter un lien :

1 Sélectionnez un fichier HTML dans la carte du site.
2 Choisissez Site > Lier au nouveau fjichier (Windows) ou Site > Affichage de carte de site > Lier au nouveau fjichier (Macintosh), ou bien choisissez Lier au nouveau fjichier dans le menu contextuel.
3 Dans la boîte de dialogue qui s'affiche, entrez les informations suivantes : Nom du fichier indique le nom du fichier.

Titre indique le titre de la page.

Texte du lien indique le texte du lien qui connecte le fichier sélectionné au nouveau fichier. Le lien apparait dans le fichier sélectionné.

4 Cliquez sur OK.

Le fjichier est enregistré dans le même repertoire que le fjichier sélectionné. Si un nouveau fjichier est ajoute à une branche cachée, le nouveau fjichier est également caché. Voir Affichage et masquage des fjichiers de la carte du site, page 124.

Pour changer le titre d'une page :

1 Assurez-vous que l'option Afficher les titres de page est activée.

Choisissez Affichage > Afficher les titres de page (Windows) ou Site > Affichage de carte de site > Afficher les titres de page (Macintosh).

2 Procedez de l'une des manieres suivantes:

• Sélectionnez une page, puis cliquez sur le titre. Lorsque le titre devient un champ modifiable, entrez un nouveau titre de document.
• Sélectionnez une page, puis choisissez Fichier > Renommer (Windows) ou Site > Renommer (Macintosh).

Pour modifier la page d'accueil, procedez de l'une des manieres suivantes :

• Choisissez Site > Affichage de carte de site (Windows) ou Site > Affichage de carte de site > Nouvelle page d'accueil (Macintosh) pourisser une nouvelle page d'accueil.
• Choisissez Site > Sélectionner la page d'accueil (Windows) ou Site > Affichage de carte de site > Sélectionner la page d'accueil (Macintosh) pour faire d'une page existante la page d'accueil.

Pourmettreàjourl'affichagede lacartedusiteapresavoir apportedeschangements：

• Choisissez Affichage > Actualiser (Windows) ou Site > Affichage de carte de site > Actualiser Local (Macintosh).

Création et modification de liens dans un affichage de carte de site

Voupez modifier la structure du site dans la carte du site en ajoutant, modifient ou suprimant des liens. La carte du site est automatiquement mise a jour pour afficher les modifications apportées au site.

Pour ajouter un lien, procedede z l'une des manieres suivantes:

• Faites glisser une page de l'Explorateur Windows ou du Sélecteur Macintosh vers la carte du site.
• Sélectionnez une page HTML, puis choisissez Site > Lier au fjichier existant (Windows) ou Site > Affichage de carte de site > Lier au fjichier existant (Macintosh), ou bien choisissez Lier au fjichier existant dans le menu contextualuel.
• Sélectionnez une page HTML dans la carte du site. L'icone Pointer vers un fichier s'affiche. Cliquez sur l'icone et faites-la glisser vers l'objet vers lequel vous poulez creator un lien. Il peut s'agir d'un fichier, d'un document place sur le bureau ou d'une ancre nommée dans un document ouvert sur le bureau. Voir Création de liens avec l'icone Pointer vers un fichier, page 108.

Pour changer un lien :

• Sélectionnez la page etCHOisissez Site > Modifier le lien (Windows) ou Site > Affichage de carte de site > Modifier le lien (Macintosh). Naviguez jusqu'au fichier ou tapez une URL.

Pour supprimer un lien, procedede l'une des manieres suivantes:

• Sélectionnez la page dans la carte du site, puis désisissez Site > Supprimer le lien (Windows) ou Site > Affichage de carte de site > Supprimer le lien (Macintosh).
• Sélectionnez la page dans la carte du site, puis, dans le menu contextualuel,CHOISSEZ Supprimer le lien.

Pour ouvrir la source d'un lien :

1 Sélectionnez un fichier dans la Carte du site.
2 Choisissez Site > Ouvrir la source du lien (Windows) ou Site > Affichage de carte de site > Ouvrir la source du lien (Macintosh).

L'inspecteur de propriétés et le fisquier source contenant le lien sont ouverts. Le lien est mis en surbrillance.

Affichage et masquage des fichiers de la carte du site

Voussoupiezmodifierlambdaiseen forme delacarte du site de maniereaafficher ou cacherlesfichier cachés et dépendants.Ceci est utile lorsquyouvoulezmettre l'accent sur des rubriques ou des éléments de contenu clés et ne pasmettre l'accent sur du matériel de moindre importance.

Avant de cacher ou d'afficher un fisier HTML, vous devez commencer par le marquer comme "cache". Lorsque vous masquez un fisier marqué comme cache, ses liens sont également cachés. Lorsque vous affichez un fisier marqué comme cache, l'icone et ses liens sont visibles dans l'affichage de la carte du site, mais les noms s'affichent en italiques.

Pour marquer des fichiers comme masqués :

1 Cliqueur sur un ou plusieurs fichiers.
2 Choisissez Affichage > Afficher/Masquer le lien (Windows) ou Site > Affichage de carte de site > Afficher/Masquer le lien (Macintosh).

Pour afficher ou caches des fischiers marqués comme cachés, précédez de l'une des manières suivantes :

• Choisissez Affichage > Afficher les fichiers marqués comme masqués (Windows) ou Site > Affichage de carte de site > Afficher les fichiers marqués comme masqués (Macintosh).
• Choisissez Affichage > Mise en forme (Windows) ou Site > Affichage de carte de site > Mise en forme (Macintosh) pour ouvrir la boîte de dialogue Définition du site et activer l'option Afficher les fischiers marqués comme cachés.

Par défaut, les fichiers dépendants sont déjà cachés. Vous pouvez désirir de les afficher dans la carte du site.

Pour afficher des fichiers dépendants, procédez de l'une des manières suivantes :

• Choisissez Affichage > Afficher les fichiers dépendants (Windows) ou Site > Affichage de carte de site > Afficher les fichiers dépendants (Macintosh).
• Choisissez Affichage > Mise en forme (Windows) ou Site > Affichage de carte de site > Mise en forme (Macintosh) pour ouvrir la boîte de dialogue Définition du site et selectionner l'option Cliquez sur Affichage.

Affichage du site à partir d'une branche

Voues pouvez afficher les détails d'une section spécifique d'un site en faisant d'une branche le centre de la carte du site.

Pour afficher une autre branche :

• Sélectionnez la page que vous pouze afficher etCHOisissez Affichage > Afficher comme racine (Windows) ou Site > Voir comme racine > Afficher comme racine (Macintosh).

La carte du site est redessinée dans la fenêtre comme si la page spécifique était à la racine du site. Le champ Navigation dans le site au-dessus de la carte du site affiche le chemin de la page spécifique par rapport à la page d'accueil.

Selectionnez un élément du chemin pour afficher la carte du site depuis ce niveau en cliquant une fois dessus.

Pour étendre et contraster des branches :

• Cliquez sur les signes plus et moins (Windows) ou sur les flèches d'aggrandissement (Macintosh) pour étendre ou contraster la branche.

Enregistrement de la carte du site

Vous pouvez enregistrer la carte du site comme une image, puis afficher l'image (ou l'imprimer) dans un éditeur d'image.

Pour creer un fichier d'imag de la carte du site courante :

1 Dans la carte du site,CHOISSEZ Fichier > Enregisterr la carte du site sous (Windows) ou Site > Affichage de carte de site > Enregisterr la carte du site sous (Macintosh).

2 Entrez un nom pour l'image dans la boîte de dialogue qui s'affiche.

CHAPITRE 7

Gestion de site

Gestion de site – Vue d'ensemble

Pour vous aider à organiser les fichiers sur votre système, Dreamweaver produit la structure du site web distant sur votre système local. Les liens que vous creez au niveau du site local continuent à fonctionner sur le site distant du fait que la structure des deux sites est rigoureusement identique.

Vous commencez par creer un site local dans Dreamweaver en selectionnant un repertoire racine local à l'aide de la commande Définir les sites. Voir Création d'un site local, page 106. Vous associez ensuite le site local à un serveur distant en selectionnant des options supplémentaires dans la boîte de dialogue Définir les sites. Voir Définition d'un site, page 128.

Lors du transfert de fischiers entre le site local et le site distant, Dreamweaver maintain des structures de répertoires identiques pour veiller à ce que les liens et les références ne soient pas accidentellement alterés. Si certains repertoires n'existent pas sur le site vers lequel les fischiers sont transférés, Dreamweaver les cree automatiquement.

Dreamweaver intègre une série de fonctions pour la structuration du site, la navigation à l'intérieur et entre des documents, et le transfert de fischiers vers un serveur distant. Pour faciliter le travail en groupe sur un site web, vous pouvez archiver et extraire des fischiers sur le serveur distant afin d'éviter que plusieurs personnes ne travaillent sur les mêmes fischiers en même temps. Dreamweaver n'effectue pas de contrôle de version, pas plus qu'il ne retire du serveur distant les fischiers ou répertoires n'existant plus dans le réseau racine local.

Définition d'un site

Utilisez la commande Définir les sites pour ajouter ou modifier les informations du serveur distant, le réseau racine local et les préférences d'archivage/ extraction pour le site existant ou pour créé un nouveau site.

Pour définir un site :

1 Cliquez sur Définir les sites dans le menu contextuel des sites actuels de la fenêtre Site, ouCHOisissezFichier > Nouveau site (Windows)ou Site > Définir les sites (Macintosh).

2 Dans la boîte de dialogue qui s'affiche, cliquez sur Nouveau ou seLECTIONnez un site existant, puis cliquez sur Édition.
3 Dans le panneauInfos locales de la boite de dialogue Definition du site, tapez un nom de site, puis cliquez sur l'icone de repertoire pour naviguer vers un repertoire racine local et le selectionner (repertoire qui representera le niveau supérieur du site) si ce n'est déjà fait.
4 Activez l'options Cache pour accélérer la vitesse des tâches de gestion des liens et du site. Voir Gestion des liens, page 145.
5 Tapez l'URL de votre site dans le champ Adresse HTTP.

Par exemple, l'adresse HTTP pour le site web dreamcentral est http://www.dreamcentral.com. Cette valeur est utilisé par le Vérificateur de lien pour déterminer si les liens de chemin d'accès absolu renvoient à des fichiers du site ou de sites externes. Voir Vérification des liens entre documents, page 149.

6 Dans la liste Catégorie de gauche, cliquez surInfos du serveur web.

7 Choisissez l'une des optionsInfos du serveur web suivantes :
- Choisissez Aucun si vous voulez seulement travailler avec votre site localement et ne prévoyez pas de le télécharger sur un serveur, puis passez à l'objet 13.
- Choisissez Local/Réseau si le serveur web est monté comme lecteur de réseau local ou serveur NFS (Macintosh), ou si vous faites tourner un serveur web sur votre machine locale. Cliquez sur l'icone de répertoire pour repérer et sélectionner le réseau dans lequel sont stockés les fischiers du site sur le serveur, puis passez à l'étape 13.
- Choisissez FTP si vous vous connectez à votre serveur web par FTP.
8 Entrez le nom de l'hote FTP vers lequel vous téléchargez les fischiers de votre site web.

N'utilisiez pas ftp:// devant l'adresse. Par exemple, l'hôte FTP du site web dreamcentral est shell16.ba.best.com.

9 Tapez le nom du réseau hôte au niveau du site distant où sont stockés les documents accessibles au public (également appelé racine du site).

Par exemple, le réseau hôte du site dreamcentral est public_html/. Pour d'autres sites, le réseau se situe plusieurs niveaux plus bas (par exemple, www/public/docs/ ou public_html/htdocs/), ou bien coïncide avec le réseau de connexion (auquel cas le champ doit être laissé vierge).

10 Tapez vos nom d'utilisateur et mot de passer.

Le mot de passer est automatiquement enregistré. Désactivez Enregistrer si vous poulez que le système vous demande le mot de passer chaque fois que vous vous connectez au serveur distant.

11 Activez l'option Utiliser le pare-feu si vous vous connectez au serveur distant alors que vous vous trouvez derrière un pare-feu. Voir Paramétrage des préférences pour les sites FTP, page 132.

12 Dans la liste Catégorie, à gauche,clinquez sur Archiver/Extraire.

Activez l'option Activer l'archivage et l'extraction de filchier si vous travailliez au sein d'une equipe (ou si vous travailliez seul mais depuis plusieurs machines).

Cette option est utile pour informer les autres que vous avez extrait un fjichier pour l'éditer, ou pour vous rappeler qu'une version plus récente d'un fjichier est peut-être ouverte sur une autre machine. Voir Utilisation du système d'archivage et d'extraction de fjichiers, page 133.

Activez l'option Extraire les fichiers à l'ouverture si vous pouze que les fichiers soient automatiquement extrais lorsque vous double-cliquez dessus pour les extraire dans la fenetre Site.
Tapez un nom d'extraction.

Il s'agit du nom qui s'affichera dans la fenetre du site à côté de tous les fichiers extraits, permettant à d'autres membres de l'équipe de vous localiser si vous avez extrait un fichier dont ils ont besoin. Si vous travailliez seul sur plusieurs machines, utilisez un nom d'extraction différent pour chaque machine (par exemple, PierreR-MacDomicile et PierreR-PCBureau), de manière à savoir où se trouve la dernière version du fichier si vous oubliez de le réarchiver.

13 Cliquez sur OK.

Options de la fenêtre Site

Utilisez la fenêtre Site pour les opérations de maintenance de filchier standard (création de nouveaux documents HTML, déplacement de fichiers, création de répertoires et suppression d'élement) pour la création de scénarios avec la carte du site (voir Création de cartes de site, page 118) et pour le transfert de fichiers entre le site local et le site distant. Par défaut, le site distant (ou carte du site) apparait dans le volet de gauche et le site local dans le volet de droite. Vous pouvez modifier ce paramétrage au niveau des préférences pour le Site FTP. Voir Paramétrage des préférences pour les sites FTP, page 132.

Pour ouvrir la fenêtre Site,CHOISSEZ Fenetre > Fichiers de site,puis selectionnee l'une des options suivantes:

Connector (uniquement disponible avec le paramètre FTP) Se connecte ou se déconnecte du site distant. Par défaut, Dreamweaver se déconnecte du site distant après 30 minutes d'inactivité. Choisissez Édition > Préférences, puis sélectionnez FTP du site pour changer la durée d'inactivité.

Actualiser (uniquement disponible avec le paramétrage Local/Réseau) Actualise la liste de repertoires distante. Utilise ce bouton pour afficher la liste de repertoires distants si vous avez monté le lecteur contenant le site distant après ouverture de la fenêtre Site.

Acquérir Copie les fichiers scélectionnés sur le site distant vers le site local. Si l'option Activer l'archivage et l'extraction de fichier est activée, les copies locales sont en lecture seule; les fichiers restent accessibles, sur le site distant, à d'autres membres de l'équipe qui peuvent les extraire. Voir Acquisition de fichiers au départ d'un serveur distant, page 135. Si l'option d'archivage et d'extraction de fichier est désactivée, l'obtention d'un fichier transfère une copie assortie des privilèges de lecture et d'écriture. Voir Acquisition de fichiers au départ d'un serveur distant, page 135.

Placer Copie les fichiers scélectionnés sur site local vers le site distant sans en changer le statut d'archivage/extraction. Voir Placement de fichiers sur un serveur distant, page 136.

Extraire Transfère une copie du fichier du serveur distant vers le site local et verrouille le fichier sur le serveur. Cette option n'est pas disponible si l'option d'archivage et extraction de fichier est désactivée pour le site en cours. Voir Archivage et extraction de fichiers sur un serveur distant, page 134.

Archiver Transfère une copie du fjichier local vers le serveur distant, de manière à ce qu'il puisse être édité par d'autres membres de l'équipe. Le fjichier local est alors en lecture seule. Cette option n'est pas disponible si l'option d'archivage et extraction de fjichier est désactivée pour le site en cours. Voir Archivage et extraction de fjichiers sur un serveur distant, page 134.

Listes des sites courants Assiste la liste des sites distants que vous avez définis. Pour changer de site, Sélectionnez-en un autre dans la liste. Pour ajouter un site ou éditer les informations relatives à un site existant, cliquez sur Définir les sites au bas de la liste (voir Définition d'un site, page 128).

Affichage des fichiers de site Modifie le volet du site distant de manière à ce qu'il affiche la structure de fichiers. Il s'agit de l'affichage par défaut de la fenêtre Site.

Affichage de carte de site Modifie le volet du site distant de manière à ce qu'il affiche une carte visuelle de votre site, base sur la manière dont les documents sont reliés entre eux. Maintenez le bouton enforcé pour selectionner Carte seulement ou Carte et fichiers dans le menu déroulant.

Arreter la tâche en cours Arrête toute activité en cours, notamment l'acquisition et le placement de fichiers. Le bouton s'affiche sous la forme d'une croix rouge dans le coin inférieur droit.

Paramétrage des préférences pour les sites FTP

Choisissez Édition > Préférences, sélectionnez FTP du site, puis choisissez parmi les préférences suivantes pour contröler les fonctions de transfert de fichier disponibles dans la fenêtre Site :

Toujours afficher Spécifie que soit les fichiers locaux, soit les fichiers distants, s'afficheront toujours dans le volet gauche ou dans le volet droit de la fenêtre Site. Par défaut, le réseau local s'affiche à droite.

Fichiers dépendants Affiche une invite proposant de transférer les fischiers dépendants (images et autres fischiers tels que des feuilles de style externes, charges par le navigateur en même temps que le fidier HTML). Les options Invite lors de Acquérir/Extraire et Invite lors de Placer/Archiver sont toutes deux Sélectionnées par défaut. Sélectionnez Ne plus afficher ce message lorsque l'invite Acquérir/Extraire s'affiche afin de désactiver la première option, et Sélectionnez-le lorsque l'invite Placer/Archiver s'affiche afin de désactiver la seconde option.

Remarque: Pour forcer l'affichage de l'invite Inclure fichiers dépendants? lorsque ces options sont désactivées, appuyez sur Alt (Windows) ou sur Option (Macintosh) tout en cliquant sur Acquérir, Placer, Extraire ou Archiver.

Connexion FTP Déterminé si la connexion avec le site distant est terminée après que le délambda d'inactivité spécifique s'est écoulé.

Déconnecter après Spécifie le temps, exprime en secondes, pendant lequel Dreamweaver tentera d'étabir la connexion avec le serveur distant. À défaut de réponse à l'issue du déali spécifique, Dreamweaver affiche une boîte de dialogue vous avertissant de ce fait.

Hôte du firewall Spécifique l'adresse du serveur proxy auquel vous vous connectez si vous vous trouvez derrière un pare-feu. Dans le cas contraire, laissez ce champ à blanc.

Port du firewall Spécifique le port par l'intermédiaire duquel vous vous connectez au serveur FTP. Si vous vous connectez par l'intermédiaire d'un port autre que 21 (port par défaut pour FTP), tapez le numéro ici.

Définir les sites Ce bouton ouvre la boîte de dialogue Définir les sites dans laquelle vous pouvez créé un site ou modifier un site existant. Voir Définition d'un site, page 128.

Utilisation du système d'archivage et d'extraction de fichiers

Lorsque vous travailliez au sein d'un groupe, vous pouvez extraire et archiver des fichiers lors de leur transfert entre le serveur distant et l'ordinateur local. Voir Archivage et extraction de fichiers sur un serveur distant, page 134.

L'extraction d'un fjichier équivaut à déclarer : "Je suis en train de travailler sur ce fjichier ; n'y touche pas." Lorsqu'un fjichier est extrait, Dreamweaver affiche une coche à côté de son icône dans la fenêtre Site. Une coche de couleur verte indique que le fjichier a été extrait par vous et une coche de couleur rouge indique qu'il a été extrait par un autre membre de l'équipe. Le nom de cette personne apparait dans la fenêtre Site.

L'archivage d'un fjichier équivaut à lemettre à la disposition des autres membres de l'équipe, qui peuvent l'extraire et l'editor. En cas d'extraction, la version locale du fjichier est en lecture seule afin d'éviter qu'une autre personne n'apporte des modifications au fjichier extrait.

Dreamweaver suit la trace des fischiers extrais en plaçant un fisier texte portant l'extension .lck (et contenant le nom de l'utilisateur ayant extrait le fisier) tant sur le serveur distant que sur le site local. Les fisiers .lck ne sont pas visibles dans la fenêtre Site.

Dreamweaver ne convertit pas les fischiers extraits en fischiers en lecture seule sur le serveur distant. Si vous transféré des fischiers à l'aide d'une application autre que Dreamweaver, vous risquez d'écraser les fischiers extraits. Toutefois, dans les applications autres que Dreamweaver, le fjchier .lck est visible à côté du fjchier extrait dans la hierarchie de fischiers, ce qui devrait permettre d'eviter de tels accidents.

Vou puez activez les fonctions d'archivage/extraction pour certains sites et les désactiver pour d'autres. Voir Definition d'un site, page 128. Pour plus d'informations sur le transfert de fichiers entre les sites locaux et distants sans archivage ni extraction, voir Acquisition de fichiers au départ d'un serveur distant, page 135 et Placement de fichiers sur un serveur distant, page 136.

Archivage et extraction de fichiers sur un serveur distant

Utilisez la fenêtre Site pour archiver et extraire des fichiers sur un serveur distant. Vous pouvez également annuler une extraction sans transférer le fjchier de maniere à ce qu'il soit disponible pour que d'autres membres de l'equipe puissant l'extraire.

Pour extraire des fichiers à partir d'un serveur distant :

1 Dans le menu déroulant des sites courants dans le haut de la fenêtre Site, cliquez sur le site de votrechoix.
2 Sélectionnez un ou plusieurs fischiér(s), cliquez avec le bouton droit (Windows) ou cliquez en tenant la touche Contrôle enfonnée (Macintosh), puis cliquez sur Extraire dans le menu contextuel ou sur le bouton Extraire dans le haut de la fenêtre Site.
3 Cliquez sur Oui à l'invite pour télécharger n'imprime queel fichier dépendant.

Pour archiver des fichiers sur un serveur distant :

1 Dans le menu déroulant des sites courants dans le haut de la fenêtre Site, cliquez sur le site de votrechoix.
2 Sélectionnez un ou plusieurs fischiers extrais ou nouveaux dans le volet du site local, cliquez avec le bouton droit (Windows) ou cliquez en tenant la touche Contrôle enfoncée (Macintosh), puis cliquez sur Archiver dans le menu contextualuel, ou sur le bouton Archiver dans le haut de la fenetre Site.

Les fichiers extrais sont signalés par une coche verte. Les nouveaux fichiers ne sont associés à aucune coche ni aucun symbole de verrouillage.

3 Cliquez sur Oui à l'invite pour télécharger n'importe quel fjchier dépendant. Il est always conseilé de telecharger des fjchiers dépendants en extrayant un nouveau fjchier.

Pour annuler l'extraction d'un fichier :

• Sélectionnez le fjichier désire, cliquez avec le bouton droit (Windows) ou cliquez en tenant la touche Contrôle enfonnée (Macintosh), puis cliquez sur Annuler l'extraction dans le menu contextual. La copie locale du fjichier est alors en lecture seule et toutes les modifications que vous y avez apportées sont perdues.

Acquisition de fichiers au départ d'un serveur distant

L'opération d'acquisition de fichiers consiste à les copier du site distant vers le site local où ils seront accessibles en lecture seule. Si vous ne travailliez pas au sein d'un groupe et poulez accuperir des fichiers qui soient également accessibles en écriture, désactivez l'option Activer l'archivage et l'extraction de fichier pour le site. Voir Définition d'un site, page 128. Voir aussi Utilisation du système d'archivage et d'extraction de fichiers, page 133.

Dreamweaver enregistre toute l'activité de transfert de fischier. Si une erreur se produit lors du transfert d'un fischier, le journal du site FTP peut vous aider à déterminer le problème. Pour afficher le journal,CHOISSEZ Fenetre > Journal FTP du site dans la fenetre du site (Windows) ou Site > Journal FTP du site (Macintosh).

Pour acquiérir des fichiers sur un serveur distant :

1 Choisisse Fenetre > Fichiers du site pour ouvrir la fenetre Site.
2 Dans le haut de la fenêtre Site, cliquez sur le site de votrechioix dans le menu déroulant de la liste des sites.
3 Cliquez sur Connecter pour étabir une connexion avec le serveur distant. Si une connexion est déjà établie (le bouton Connecter devient Déconnecter), sautez cette étape.
4 Sélectionnez les fichiers de votrechoix dans le volet du site distant.
5 Cliquez sur Acquérir ou cliquez avec le bouton droit (Windows) ou cliquez en tenant la touche Contrôle enfoncée (Macintosh), puis cliquez sur l'option Acquérir du menu contextual.
6 Cliquez sur OK à l'invite pour télécharger tout filchier dépendant.

Remarque: Cliquez sur Arreter la tâche en cours (le signe X rouge dans le coin inférieur droit) ou appuyez sur Echap (Windows) ou Commande-. (point) (Macintosh) pour abandonner le transfert de fichier.

Placement de fichiers sur un serveur distant

L'opération de placement de fischiers consiste à les copier du site local vers le site distant sans changer l'état d'extraction du fjchier. Si vous pouze placer un fjchier sur un serveur distant et l'archiver, utilisez la commande Archiver. Voir Archivage et extraction de fjchiers sur un serveur distant, page 134.

Dreamweaver enregistre toute l'activité de transfert de fichier. Si une erreur se produit lors du transfert d'un fichier, le journal du site FTP peut vous aider à déterminer le problème. Pour afficher le journal,CHOISSEZ Fenetre > Journal FTP du site dans la fenetre du site (Windows) ou Site > Journal FTP du site (Macintosh).

Remarque: N'utilise pas de caractères ASCII complexes (par exemple, é, c, ¥) dans le nom des fichiers que vous avez l'intention de placer sur un serveur distant. Bon nombre de serveurs coderont ces caractères lors du téléchargement, ce qui risque de supprimer les liens avec le fjchier.

Pour placer des fichiers sur un serveur distant :

1 Choisissez Fenetre > Fichiers du site pour ouvrir la fenetre Site.
2 Dans le haut de la fenêtre Site, cliquez sur le site de votrechioix dans le menu déroulant de la liste des sites.
3 Cliquez sur Connecter pour étabir une connexion avec le serveur distant. Si une connexion est déjà établie (le bouton Connecter devient Déconnecter), sautez cette étape.
4 Sélectionnez les fichiers de votre besoin dans le volet du site local.
5 Cliquez sur Placer ou cliquez avec le bouton droit (Windows) ou cliquez en tenant la touche Contrôle enfoncée (Macintosh), puis choisissez l'option Placer du menu contextualuel.
6 Cliquez sur OK à l'invite pour télécharger tout fichier dépendant.

Remarque: Cliquez sur Arreter la tâche en cours (le signe X rouge dans le coin inférieur droit) ou appuyez sur Echap (Windows) ou Commande-. (point) (Macintosh) pour abandonner le transfert de fichier.

Recherche et remplacement

Vou puez rechercher du texte, du texte entoure de balises spécifiques, des balises HTML et des attributs dans le document en cours, dans des fichiers sclectionnés, dans un réseau ou dans un site tout entier.

Pour lancer une recherche :

1 Sélectionnez l'une des options suivantes :

Dans la fenêtre Document ou Site,CHOISSEZ Edition > Rechercher ou Edition Remplacer.
- Dans l'inspecteur HTML, cliquez avec le bouton droit (Windows) ou cliquez en tenant la touche Contrôle enforcée (Macintosh), puis choisissez Rechercheur ou Remplacer dans le menu contextuel.
2 Dans la boîte de dialogue Rechercher ou Remplacer, utilisez l'option Rechercher dans pour spécifique les fichiers sur lesquels la recherche doit porter :

L'option Document courant limite la recherche au document actif. Cette option n'est disponible que lorsque vous choisissez la commande Recherche ou Remplacer dans la fenetre Document ou dans le menu contextual de linspecteur HTML.

L'option Fichiers sélectionnés limite la recherche aux fichiers et repertoires actuellément selectionnés dans la fenêtre Site. Cette option n'est disponible que lorsque vous choisissez la commande Rechercheur ou Remplacer dans la fenêtre Site.

L'option Site courant étend la recherche à l'ensemble des documents HTML, fichiers de bibliothèque et documents texte du site courant. Le nom du site s'affiche à droite du menu dérouulant. S'il ne s'agit pas du site dans lequel vous poulez rechercher,CHOISSEZ un site différent dans le menu dérounant des sites actuels de la fenêtre Site.

L'option Répertoire limite la recherche à un groupe de fischiers spécifique. Cliquez sur l'icone de répertoire pour naviguer jusqu'àu répertoire dans lequel vous pouze rechercher et selectionnez-le.

3 Utilisez l'option Rechercher pour specifier le type de recherche à effectuer.

L'option Texte vous permet de rechercher des chaînes de texte spécifique dans la fenêtre Document. Une recherche de type texte ignore tout code HTML present. Voir Recherche de texte dans la fenêtre Document, page 139.

L'option Source HTML vous permet de rechercher des chaînes de texte spécifique dans le code source HTML. Voir Recherche de texte dans la source HTML, page 139.

L'option Texte avancé permet de rechercher des chaînes de texte spécifique se trouvant ou non à l'intérieur d'une ou plusieurs balises. Prenons, par exemple, un document contenant le code HTML Jean essaie de terminer son travail à temps, mais n'y arrive pas toujours. Ilessaie cependant farouchement.

Rechercher essaie pas de balise interne i ne permet de trouver que la seconde instance du mot essaie. Voir Recherche de texte entoure de balises spécifiques, page 141.

L'option balise vous permet de rechercher des balises, attributs et valeurs d'attribut spécifique telles que toutes les balises TD avec VALIDN paramétré sur TOP. Voir Recherche de balises et attributs HTML, page 139.

4 Utilisez l'une des options suivantes pour élargir ou rétrécir la recherche :

L'option Tenir compte de la casse limite la recherche au texte dont la casse (combinaison de caractères majuscules et minuscules) correspond au texte que vous poulez trouver. Par exemple, si vous recherchez les Français, vous ne trouverez pas le site français.

L'option Ignorer les différences entre les espaces blancs traite tout espace blanc comme un simple espace pour ce qui a trait à la correspondance. Par exemple, lorsque cette option est sélectionnée, une recherche sur ce texte trouvera ce texte mais non cetexte. Cette option n'est pas disponible lorsque l'option Utiliser les expressions régulières est sélectionnée ; vous devez écrire explicitement l'expression régulière pour ignorer les espaces blancs.

L'option Utiliser les expressions régulières fait que certains caractères (nels que ?, *, \w et \b) de la chaine recherche sont interpréts comme des opérateurs d'expression réguliers. Par exemple, si vous cherchez le c\w\b noir, vous trouvezez aussi bien le chien noir que le chapeau noir. Voir À propos des expressions régulières, page 143.

Recherche de texte dans la fenêtre Document

Utilisez l'option texte de la boîte de dialogue Rechercher ou Remplacer pour rechercher des chaînes de texte spécifique en ignorantant les codes HTML. Par exemple, si vous cherchez le chien noir, vous trouvrez aussi bien le chien noir que le chien < i> noir < / i> . Voir Recherche et remplacement, page 137 pour obtenir des instructions pas à pas sur le lancement d'une recherche.

Recherche de texte dans la source HTML

Utilisez l'option source HTML de la boîte de dialogue Rechercher ou Remplacer pour rechercher des chaînes de texte spécifique dans le code source HTML. Par exemple, si vous cherchez chien noir dans le code suivant, vous trouvez deux correspondances (dans l'attribut ALT et dans la première phrase):

<IMG SRC="rex.gif"WIDTH="100"HEIGHT="100"

ALT="Rex, un chien noir.">

Nous avons vu plusieurs chiens dans le parc.

Le < A HREF="rex.html">chien < / A> noir le plus sympa s'appelle Rex.

Les mots chien noir apparaissent également dans la deuxième phrase mais ils ne sont pas trouvés parce qu'ils sont coupés par un lien.

Voir Recherche et remplacement, page 137 pour obtenir des instructions pas a pas sur le lancement d'une recherche.

Recherche de balises et attributs HTML

Utilisez l'option Balise de la boîte de dialogue Rechercher ou Remplacer pour rechercher des balises, attributs et valeurs d'attributs spécifique. Par exemple, vous pouvez rechercher toutes les balises IMG avec l'attribut ALT. Voir Recherche et remplacement, page 137 pour plus d'informations sur les différents types de recherche.

Pour effectuer une recherche de balise :

1 Commencez la recherche en suivant les étapes décrites dans Recherche et remplacement, page 137.
2 Cliquez sur un marqueur spécifique dans le menu dérounant adjacent au menu dérounant Rechercher, ou cliquez sur [toute balise].

Si vous foulez seulement rechercher toutes les occurrences de la balise spécifiée, appuyez sur le bouton (-) et passez à l' étape 5. Sinon, passez à l' étape 3.

3 Limitez la recherche à l'aide de l'un des modifieurs de balise suivants :

L'option Avec attribut vous permet d'opérer un besoin dans une liste d'attributs devant figurer dans la balise pour que la correspondance soit trouvée. Vous pouvez spécifique une valeur particulière pour cet attribut ou selectionner [toute valeur].

L'option Sans attribut vous permet d'opérer un besoin dans une liste d'attributs ne devant pas figurer dans la balise pour que la correspondance soit trouvée. C'est l'option qu'il convient de désirir si vous recherchez tous les marqueurs IMG sans attribut ALT.

L'option Contenant vous permet de désigner un texte, un texte et un code ou une balise devant figurer dans la balise pour que celle-ci soit trouvée. Par exemple, dans le code B < FONT FACE = "Arial" . Heading 1 \/\/\/\/\/ < \/\/\/\/ , la balise FONT se trouve à l'intérieur de la balise B.

L'option Ne contenant pas vous permet de désigner un texte, un texte et un code ou une balise ne pouvant pas figurer dans la balise pour que cette-ci soit trouvée.

L'option Balise interne vous permet de specifier une balise à l'intérieur de laquelle la balise cible doit se trouver pour être détectée.

L'option Pas de balise interne vous permet de specifier une balise à l'intérieur de laquelle la balise cible ne peut pas se trouver pour être détectée.

4 Cliquez sur le bouton (+) et repêze l' étape 3 pour rétrécir davantage la recherche.

5 Cliquez sur Recherche suivant pourmettre en surbrillance l'occurrence suivante du texte recherche dans le document en cours, ou sur Recherche tout pour generer une liste de toutes les occurrences du texte recherche dans le document en cours. Si vous recherchez un repertoire ou un site, la fonction Recherche suivant met en surbrillance l'occurrence suivant du texte recherche dans le document en cours ou, a defaut, ouvre le document suivant contenant le texte recherche, tandis que Recherche tout genere la liste des documents contenant le texte recherche.

Recherche de texte entouré de balises spécifiques

Utilisez l'option Texte (avancé) de la boîte de dialogue Rechercher ou Remplacer pour rechercher des chaînes de texte spécifique se trouvant à l'intérieur ou à l'extérieur d'un jeu de balises. Par exemple, vous pouvez rechercher le mot Document sans-titre entre les balises TItLE pour追寻 toutes les pages sans titre du site. Voir Recherche et remplacement, page 137 pour plus d'informations sur les différents types de recherche.

Pour effectuer une recherche de texte avancée :

1 Commencez la recherche en suivant les étapes décrites dans Recherche et remplacement, page 137.
2 Tapez le texte que vous voulez rechercher dans la zone de texte adjacente au menu contextual Rechercher.

Par exemple, tapez le mot Document sans-titre.

3 Sélectionnez l'option Contenant ou ne Contenant pas, puis désissez une balise dans le menu déroulant adjacent.

Par exemple, cliquez sur Contenant, puis sur TITLE.

4 Cliquez sur le bouton plus (+) pour limiter la recherche aux balises ayant un ou plusieurs attribut(s) spécifique(s).

Du fait que la balise TITLE est depourvue d'attributs, il est inutile d'utiliser cette option pour rechercher toutes les pages sans titre du site.

5 Cliquez sur Rechercher suivant pour ouvrir le document suivant contenant le texte recherché, ou sur Rechercher tout pour générer une liste des documents contenant ce texte.

Enregistrement de modèles

Vous pouvez enregistrer des modèles de recherche en vue d'un usage ultérieur en cliquant sur le bouton Enregistrer la requête dans la boîte de dialogue Rechercher ou Remplacer. Il est utile d'enregistrer une requête si vous effectuez régulièrement la même recherche (par exemple, pour extraire des balises non standard de documents créés avec un autreéditeur HTML, ou pour confirmer que toutes les images d'un fichier ont des attributs HEIGHT,WIDTH et ALT avant de publier le document sur le web) et souhaitez ne pas devoir réintroduire chaque fois les critères de recherche.

Pour enregistrer un modele de recherche :

1 Définisse les paramètres de recherche en procédant de la manière décrite dans Recherche et remplacement, page 137.

Si vous exécutez une recherche de balise ou de texte (avancé), voir Recherche de balises et attributs HTML, page 139 ou Recherche de texte entouré de balises spécifiques, page 141 pour plus d'informations sur la définition de paramètres de recherche supplémentaires.

2 Cliquez sur le bouton Enregistrer la requête (identifié par l'icone représentant une disquette).

L'emplacement par défaut pour l'enregistrement des requêtes est le sous-repertoire Configuration/Queries se trouvant dans le repertoire de l'application Dreamweaver.

3 Dans la boîte de dialogue qui s'affiche, attribués au fichier un nom identifiant la requête, puis cliquez sur Enregistrer.

Par exemple, si le modele de recherche inclut la recherche de balises IMG sans l'attribut ALT, vous pourriez nommer la requête img_sans_alt.dwr. Les requêtes de recherche se terminent par l'extension dwq; les requêtes de remplacement, par l'extension dwr.

Pour rappeler un modele de recherche :

1 Choisissez Édition > Rechercher ou Édition > Remplacer.

2 Cliquez sur le bouton Charger la requête (identifié par une icône de répertoire).

La boîte de dialogue Charger la requête s'ouvre automatiquement dans le répertoire Configuration/Queries. Vous pouvez naviguer vers un autre répertoire si vous avons enregistré des requêtes ailleurs.

3 Sélectionnez une fichier de requête, puis cliquez sur Ouvrir.

Si vous vous trouvez dans la boite de dialogue Rechercher, seules les requêtes de recherche (fichiers .dwq) sont disponibles. Si vous vous trouvez dans la boite de dialogue Remplacer, seules les requêtes de remplacement (fichiers .dwr files) sont disponibles.

4 Cliquez sur Recherche suivant, Recherche tout, Remplacer ou Remplacer tout pour lancer la recherche.

À propos des expressions régulières

Les expressions régulières sont des modèles décrivant les combinaisons de caractères dans le texte. Utilisé-les dans vos recherches pour déscrire des concepts tels que "phrases contenant le mot 'untel'" et "valeurs d'attribut contenant un nombre". Le tableau ci-après présente les caractères spéciaux des expressions régulières, leur signification et des exemples d'utilisation.

Pour rechercher du texte contenant un des caractères spéciaux représentés dans le tableau, indique le caractère spécial à l'aide d'une barre oblique inversée. Par exemple, pour rechercher l'astérisque dans la phrase "conditions spéciales", vous pouze utiliser un modèle de recherche tel que : spéciales. Si vous n'échappez pas l'astérisque, vous trouvrez toutes les occurrences de "speciales" (de même que "special", "specaless" et "specialess"), et pas seulement celles suivies d'un astérisque.

Caractère	Indique	Exemple
^	Début d'entrée ou de ligne.	^T correspond à "T" dans "Tonerre de Brest" mais pas dans "Mon oncle Thomas"
	Fin d'entrée ou de ligne.	n correspond à "h" dans "malin" mais pas dans "noir"
*	Le caractère précédent, 0 ou plusieurs fois.	um* correspond à "um" dans "rhum", à "umm" dans "yummy" et à "u" dans "bouge"
+	Le caractère précédent, une ou plusieurs fois.	um+ correspond à "um" dans "rhum", à "umm" dans "yummy", mais à rien dans "bouge"
?	Le caractère précédent, 0 ou une fois.	st?on correspond à "son" dans "Johnson" et "ston" dans "Johnston", mais à rien dans "Appleton" ou "tension"
.	Tout caractère sauf une nouvelle ligne (retour à la ligne).	.an correspond à "ran", "tan" et à "lan" dans la phrase "rantanplan"
x|y	Soit x, soit y.	FF0000 | 0000FF correspond à "FF0000" dans BGCOLOR="#FF0000" et à "0000FF" dans FONT COLOR="#0000FF"
{n}	Exactement n occurrences du caractères précédent.	I{2} correspond à "Il" dans "elle" et aux deux premiers I de "ellille", mais ne correspond à rien dans " léger"
{n,m}	Au moins n et au plus m occurrences du caractère précédent.	F{2,4} correspond à "FF" dans "#FF0000" et aux quatre premiers F dans #FFFFFF
[abc]	Tout caractère entouré de crochets. Spécifiez une plaque de caracteres à l'aide d'un trait-d'union (par exemple, [a-f] équivaut à [abcdef]).	[e-g] correspond à "e" dans "oeil", à "f" dans "fil" et à "g" dans "garde"
[^abc]	Tout caractère non entouré de crochets. Spécifiez une plaque de caracteres à l'aide d'un trait-d'union (par exemple, [^a-f] équivaut à [^abcdef]).	[^aeiou] correspond initialement à "r" dans "orange", à "b" dans "balle" et à "k" dans "eek!"
\b	Limite de mot (telle un espace ou un retour de chariot).	\b correspond à "b" dans "balle" mais à rien dans "gober" ou "snob"
\B	Non limite de mot.	\Bb correspond à "b" dans "gober" mais à rien dans "balle"
\d	Tout chiffre. Équivalent de [0-9].	\d correspond à "3" dans "C3PO" et à "2" dans "appartement 2G"
\D	Tout caractère sauf un chiffre. Équivalent de [^0-9].	\D correspond à "S" dans "900S" et à "Q" dans "Q45"
\f	Saut de page.
\n	Saut de ligne.
\r	Retour de chariot.
\s	Tout caractère d'espace: espacement, tabulation, saut de page ou saut de ligne.	\sval correspond à "balle" dans "le val André" mais à rien dans "aval"
\S	Tout caractère autre qu'un espace.	\Sval correspond à "val" dans "aval" mais à rien dans "le val André"
\t	Tabulation.
\w	Tout caractère alphanumeric, notamment le caractère de soulignement. Équivaut à [A-Za-z0-9_].	c\w* correspond à "chien" dans "le chien noir", de même qu'à "col" et "chien" dans "le col du chien noir"
\W	Tout caractère sauf alphanumeric. Équivaut à [^A-Za-z0-9_].	\W correspond à "&" dans "Tintin & Milou" et à "%" dans "100%"

Gestion des liens

Dreamweaver peutmettreà jourles liensvers eta partird'undocumentchaque fois queyou le déplacez oule renomméz à l'intérieur d'un site local.Cette fonction opere de façon optimale lorsqu'unsite tout entier (ou une section entierede celui-ci)est stocké survotre lecteur local.Aucune modification n'est apporteeaux fichiers du site distant tant que vous n'avoez pas place ou archivés les fichiers locaux sur le serveur distant.

Pour activer la gestion des liens dans Dreamweaver :

1 Choisissez Édition > Préférences, puis Sélectionnez Général.
2 Dans le menu déroulant Mettre à jour les liens,CHOISSEZ Toujours ou Invite, puis cliquez sur OK.

Si vous choisissez Toujours, Dreamweaver met automatiquement à jour les liens vers et à partir d'un document chaque fois que vous le déplacez ou le renommez (pour obtenir des instructions spécifiques sur ce qu'il convient de faire lorsque vous supprimez un fichier, voir Modification d'un lien au niveau du site, page 146). Si vous choisissez Invite, Dreamweaver commence par afficher une boîte de dialogue dans laquelle figure la liste de tous les fischiers affectés par le changement. Cliquez sur Mettre à jour pourmettre à jour les liens de ces fischiers, ou sur Ne pasmettre à jour pour laisser les fischiers intacts.

Si l'option d'archivage et d'extraction est activée, Dreamweaver essais automatiquement d'extraire le fichier avant d'apporter des modifications.

Pour accélérer le processus de mise à jour, Dreamweaver peutmaker un fjichier cache dans lequel stocker des informations sur tous les liens du site local. Ce fjichier cache est créé lorsque vous selectionnez l'option Cache dans la boîte de dialogue Définition du site, et il est imperceptiblement mis à jour lorsque vous utilisez Dreamweaver pour ajouter, modifier ou supprimer des liens vers des fjichiers du site local.

Pour creer un fichier cache pour cette site :

1 Choisissez Fichier > Ouvrir site > Définir les sites (Windows) ou Site > Définir les sites (Macintosh).
2 Sélectionnez le site dans la boîte de dialogue Définir les sites, cliquez sur Modifier, puis activez l'option Cache dans la boîte de dialogueInfos locales.

Pour recréer un cache pour votre site :

• Choisissez Site > Recreer le cache du site.

La première fois que vous ajoutez, changez ou supprimez des liens sur votre site local après avoir lancé Dreamweaver, le programme vous invite à charger le cache. Si vous cliquez sur Oui, le cache se charge et tous les liens avec le fjichier que vous avons changé sont automatiquement mis à jour. Si vous cliquez sur Non, le changement est consigné dans le cache, mais celui-ci ne se charge pas et les liens ne sont pas mis à jour.

Sur les sites de grande taille, le chargement du cache peut prendre quelques minutes ; l'essential de ce temps est utilisé pour comparer l'houre et la date des fischiers se trouvant sur le site local à celles enregistrées dans le cache afin de voir si le cache est périmé. Si vous n'avez pas changé de fischiers hors de Dreamweaver, vous pouvez cliquer sur Stop en toute sécurité lorsque le bouton s'affiche.

Modification d'un lien au niveau du site

Outre la mise à jour automatique des liens par Dreamweaver chaque fois que vous déplacez ou renommez un fjchier, vous pouvez changer manuellement tous les liens (notamment mailto, ftp, nowhere et script) pour qu'ils pointent ailleurs. Vous pouvez utiliser cette option à tout moment (par exemple, il se peut que les mots "au menu cette semaine" soient liés à /menus/32.html dans tout le site et que, la semaine suivante, vous devziez changer ces liens pour qu'ils pointent sur / menus/33.html); mais elle est particulièrement utile lorsque vous voulez supprimer un fjchier vers lequel pointent des liens d'autres fjchiers.

Pour changer un lien de fichier au niveau du site :

1 Sélectionnez un fichier dans le volet du site local de la fenêtre Site.
2 Choisissez Site > Modifier le lien au niveau du site.
3 Dans la boîte de dialogue qui s'affiche, tapez un chemin relatif à la racine du site vers un autre fichier dans la zone En lien à, ou cliquez sur l'icone de répertoire pour naviguer jusqu'à un fichier et le selectionner.
4 Cliquez sur OK.

Dreamweaver met à jour tous les liens pointant vers le fjichier sélectionné en faisant en sorte qu'ils pointent vers un autre fjichier, en utilisant le format de chemin d'accès existant (par exemple, si l'ancien chemin d'accès était relatif au document, le nouveau l'est également).

Lorsqu'un lien a eté changé au niveau du site, le fichier sélectionné devient orphelin (plusaucunfichierdu site localne pointevers lui).Vous pouvez le supprimer en toute sécurité sans risque d'alterer des liens du site local.

Remarque: Tous les changements intervenant localement, songez que vous allez doivent supprimer manuellement le fjichier correspondant sur le site distant, et placer ou archiver tous les fjichiers dans lesquels des liens ont changé pour que les visiteurs de cette site poussent percevoir les changements.

Pour changer des liens e-mail, ftp, nowhere ou script au niveau du site :

1 Choisissez Site > Modifier le lien au niveau du site.
2 Dans la boite de dialogue qui s'affiche, tapez le lien que vous pouze modifier dans le champ Modifier tous les liens à.
3 Entrez le nouveau lien dans le champ En liens à.
4 Cliquez sur OK.

Par exemple, pourmettreàjour tous les liens e-mailpointant versvotre ancienne
adresse,voupez taper mailto:[e-mail] dans le champ Modifier tous
les liens à,et mailto:[e-mail] dans le champ En liens à.

Test du site

Avant de télécharger le site sur un serveur, et de le déclarer prét à être diffusé, il convient de le tester localement. Vous pourrez ainsi vous assurer que les pages doivent l'aspect youlu et opéré en la manière prévue dans les navigateurs visés, qu'elles ne comportent pas de liens brises et que leur téléchargement ne prend pas trop de temps.

Les instructions suivantes vous aideront à garantir aux visiteeurs de votre site une expérience positive :

Assurez-vous que les pages fonctionnent comme prévu dans les navigateurs visés et qu'elles échouent "éligament" dans les autres. Les pages doivent être lisibles et fonctionnelles dans les navigateurs ne prend pas en charge les styles, les calques ou les éléments JavaScript. Voir Vérification de la compatibilité d'une page avec les navigateurs cibles, page 148. Pour les pages qui ne s'affichent pas dans des navigateurs plus anciens, songez à utiliser le comportement Vérifier le navigateur pour rediriger automatiquement les visiteurs vers une autre page. Voir Vérification du navigateur, page 266.
- Vérifiez si le site contient des liens brises (et réparedes). Dreamweaver génére également une liste de liens vers des sites externes lorsque vous vérifie les liens. Périodiquement, suivez ces liens pour vous assurer qu'ils sont toujours valides. Les autres sites étant parfois modifiés et réorganisés, il peut arriver que certaines pages vers lesquelles vos liens pointent soient déplacées ou supprimées. Voir Vérification des liens entre documents, page 149 et Réparation de liens brises, page 150.
- Affichez les pages dans le plus grand nombre de navigateurs et sur le plus grand nombre de plates-formes possible. Ceci vous donne la possibilité de voir les différences de presentation, de couleur, de taille de police et de format de fenêtre par défaut qu'il est impossible de prévoir lors de la vérification dans le navigateur cible. Voir Aperçu dans des navigateurs, page 151.

Surveillance la taille des pages et le temps nécessaire à leur téléchargement. Songez que, pour les pages contenant un grand tableau, les visiteurs ne voient rien tant que le tableau n'est pas entièrement chargé. Envisagez de fragmenter les grands tableaux ; si c'est impossible, envisagez de placer du contenu, tel qu'un message de bienvenue ou une bannière publicitaire, en dehors du tableau, en haut de la page, de manière à ce que les utilisateurs puissant voir ce contenu pendant le téléchargement du tableau. Voir Vérification du temps et de la taille de téléchargement, page 152.

Vérification de la compatibilité d'une page avec les navigateurs cibles

Dreamweaver yous permit de construire des pages web avec des éléments pris en charge par tous les navigateurs (par exemple des images et un paragraphe de texte), de même que des éléments qui ne sont pris en charge que par des navigateurs récents (par exemple, les styles et les calques).

La fonction Vérifier navigateurs cibles teste le code HTML de vos documents pour voir s'il ne contient pas de balises et d'attributs non pris en charge par vos navigateurs cibles. Cette vérification n'alerte en rien le document.

La fonction Vérifier navigateurs cibles utilise des fichiers texte appelés profils de navigateur pour déterminer les balises prises en charge par tel ou tel autre navigateur. Dreamweaver comprend des profils prédéfinis pour Netscape Navigator, versions 2.0, 3.0 et 4.0, et Internet Explorer, versions 2.0, 3.0 et 4.0. Pour modifier les profils existants ou en creer de nouveaux, voir Créer et modifier les profils de navigateur, page 311.

Vou puez executer une verification du navigateur cible sur un document, un repertoire ou tout un site.

Pour exécuter une vérification du navigateur cible :

1 Sélectionnez l'une des options suivantes :

Pour appliquer la vérification sur le document en cours, enregistrrez le fjchier. La vérification est appliquée à la dernière version enregistrree du fjchier. Elle ne porte donc pas sur les changements non enregistrres.
Pour appliquer la vérification à un réseau ou un site,CHOISSEZ FENETRE > Fichiers du site pour ouvrir la fenetre Site, puis selectionnez un sous-repertoire du réseau local. La vérification du navigateur cible est appliquée à tous les fichiers HTML de ce réseau et de ses sous-repertoires. Les vérifications de navigateurs ne peuvent etre appliquées qu'aux fichiers locaux.

2 Choisissez Fichier > Vérifier navigateurs cibles.

Si vous n'avez pas encore sélectionné de navigateur principal, le programme vous invite à le faire.

3 Dans la liste des navigateurs, cliquez sur celui qui doit faire l'objet de la vérification.
4 Cliquez sur Vérifier.

Le rapport de vérification du navigateur s'ouvre dans votre navigateur principal (le cas échéant, celui-ci démarre).

5 Pour enregistrer le rapport en vue d'une consultation ultérieure, dans le navigateur,CHOISSEF FICHIER > ENregistrER.

Le rapport de vérification du navigateur cible est un fjichier temporaire qui sera stocké dans le dossier Temp de Windows et dans la racine du document sur Macintosh. Ce fjichier sera perdu si vous ne l'enregistrez pas avant de naviguer vers un autre site.

Vérification des liens entre documents

Utilisez la fonction Vérifier liens pour rechercher les liens brisés et les fischiers non référencés dans un fjichier ouvert du site local, ou dans le site local tout entier. Dreamweaver vérifie uniquement les liens et les références relatifs aux documents du site. Dreamweaver dresse une liste des liens externes apparaissant dans le(s) document(s) sélectionné(s), mais ne les vérifie pas.

Pour vérifier les liens dans le document en cours :

1 Enregistrez le fichier dans un emplacement du site local.
2 Choisissez Fichier > Vérifier liens > Ce document.

Pour vérifier les liens à l'intérieur d'une portion du site local :

1 Choisissez Fenetre > Fichiers du site pour ouvrir la fenêtre Site.
2 Choisissez un site dans le menu dérouulant de la liste des sites.
3 Dans le volet du site local, selectionnez les fichiers ou repertoires à vérifier.
4 Cliquez avec le bouton droit (Windows) ou cliquez en tenant la touche Contrôle enforcée (Macintosh), puis choisissez Vérifier les liens > Fichiers/ Dossiers sélectionnés dans le menu contextuel.

Pour vérifier les liens dans le site tout entier :

• Choisissez Fichier > Vérifier liens > Site entier.

Lorsque Dreamweaver a fini de vérifier les liens dans les fichiers spécifique, il ouvre la boîte de dialogue Vérificateur de lien. Cette boîte de dialogue affiche la liste des liens brises, des liens externes (ceux que Dreamweaver ne peut pas vérifier parce qu'ils reivoient à des pages ne faisant pas partie du site) et des fichiers orphelins (fichiers auxquels aucun autre document ne renvoie).

Pour basculer entre Liens brises, Liens externes et Fichiers orphelins, selectionnez la rubrique appropriée dans le menu déroulant Afficher.

Pour enregistrer tout le rapport comme fichier texte délimité par des tabulations, cliquez sur Enregistrer. Voir aussi Réparation de liens brises, page 150.

Réparation de liens brisés

Lorsque vous vérifie des liens dans Dreamweaver, le Vérificateur de lien affiche un rapport des liens brises, liens externes et, si vous avez besoin de vérifier le site tout entier, des fichiers orphelins.

Voupez réparer les liens brises et les références d'image directement dans la boite de dialogue Vérificateur de lien ou ouvrir des fichiers de la liste et réparer les liens dans l'inspecteur de propriétés.

Pour réparer des liens dans la boîte de dialogue Vérificateur de lien.

1 Dans la boite de dialogue Vérificateur de lien, Sélectionnez le lien brisé.
2 Tapez le chemin d'accès et le nom de fischier corrects, ou cliquez sur l'icone de repertoire pour naviguer vers le fischier.
3 Appuyez sur Tab ou sur Entre.

S'il y a d'autres liens brises vers le même fjichier, une boîte de dialogue s'affiche, vous invitant à réparer également les références dans les autres fjichiers. Cliquez sur Oui pour faire en sorte que Dreamweaver mette à jour tous les documents de la liste faisant ↔ évidence à ce fjichier. Cliquez sur Non pour faire en sorte que Dreamweaver mette uniquement à jour la ↔ évidence actuelle.

Remarque: Si l'option d'archivage et d'extraction de filchier est activée pour le site, Dreamweaver essaire de vérifier les filchiers nécessitant des changements. S'il ne peut pas extraire un filchier, Dreamweaver affiche une boîte de dialogue d'avertissement et laisse les références brises Inchangées. Voir Utilisation du système d'archivage et d'extraction de filchiers, page 133.

Pour réparer des liens dans l'inspecteur de propriétés :

1 Dans la boîte de dialogue Vérificateur de lien, double-cliquez sur une entree de la colonne Fichier.

Dreamweaver ouvre le document, sélectionnez l'image ou le lien problèmeatique, et met en surbrillance le chemin d'accès et le nom de fjichier dans l'inspecteur de propriétés (si ce dernier n'est pas visible,CHOISSEFENÊTRÉ > PROPRIÉTÉS pour l'ouvrir).

2 Tapez sur le texte en surbrillance pour définir un nouveau chemin d'accès et nom de fichier, ou cliquez sur l'icone de repertoire pour naviguer vers le fichier.

Si vous mettez à jour une reférence d'image et si la nouvelle image s'affiche à un mauvais endroit, cliquez sur L et H dans l'inspecteur de propriétés, ou sur le bouton Actualiser pour réinitialiser les valeurs de hauteur et de largeur. Les mentions L et H passent de caractère gras à caractère normal.

3 Enregistrez le fichier.

À mesure que les liens sont réparés, leur entree disparait de la liste Liens brises. Si une entree figure toujours dans la liste après avoir entered un nouveau chemin d'accès ou nom de fichier dans le vérificateur de lien (ou après avoir enregistré des changements apportés à l'inspecteur de propriétés), cela signifie que Dreamweaver ne peut pas tracer le nouveau fichier. Le lien est encore considéré comme brise.

Aperçu dans des navigateurs

Vou puez afficher un aperçu des documents dans des navigateurs cibles à tout moment en cliquant sur Fichier > Aperçu dans le navigateur. Vous pouvez également appuyer sur F12 pour afficher le document en cours dans le navigateur principal ou Ctrl+F12 (Windows) ou Commande+F12 (Macintosh) pour afficher le document en cours dans le navigateur secondaire. Il est inutile d'enregistrer préalablement le document. Toutes les fonctions liées au navigateur opéré, y compris les comportements JavaScript, les liens relatifs et absolus avec le document, les contrôleux ActiveX, les plug-ins Netscape, etc., pour autant que vous ayez installé les plug-ins ou contrôleux ActiveX requis.

Choisissez Fichier > Aperçu dans le navigateur > Éditer la liste des navigateurs pour changer de navigateur principal ou définir un navigateur secondaire. Vous pouvez définir jusqu'à 20 navigateurs pour consulter des aperçus. Tous les navigateurs que vous définissez apparaissent dans le menu Aperçu du navigateur.

Le contenu lie à un chemin d'accès relatif à la racine n'apparait pas lorsque vous prévisualisez des documents sur un navigateur local. Cela est du au fait que les navigateurs ne reconnaissent pas les racines de site (contrairement aux serveurs). Pour afficher l'aperçu d'un contenu lie par un chemin d'accès relatif à la racine, placez le fjchier sur un serveur distant, puis affichez-le à partir de la. Voir aussi A propos des chemins relatifs et absolutus, page 114.

Paramétrage des préférences pour Aperçu dans le navigateur

Les préférences pour Aperçu dans le navigateur affichent les navigateurs actuellement définis comme principal et secondaire. Pour ouvrir les préférences d'aperçu dans le navigateur,CHOISSEZ Édition > Préférences,Aperçu dans le navigateur ou Fichiers > Aperçu dans le navigateur > Éditer la liste des navigateurs. Voir Aperçu dans des navigateurs, page 151.

AjouterDefinitunnouveau navigateur.

Modifier Change les paramètres du navigateur sélectionné.

Supprimer Supprime le navigateur selectionné de la liste.

Navigateur principal et navigateur secondaire Spécifique si le navigateur sélectionn est le navigateur principal ou le navigateur secondaire. La touche F12 ouvre le navigateur principal et la touche Ctrl+F12 (Windows) ou Commande+F12 (Macintosh) ouvre le navigateur secondaire.

Aperçu en ligne (uniquement pour Windows) Fournit la page courante pour un aperçu sur un serveur local comme URL commençant par http://hôteLocal/. Avec cette option désactivée, Dreamweaver ouvre le document dans un navigateur, avec un chemin d'accès de fichier commençant par file:/. Quelquefois, les liens spécifiés comme chemins d'accès relatifs à la racine ne fonctionnement pas correctement lorsqu'on les ouvre dans un navigateur avec un chemin d'accès file:/.

Vérification du temps et de la taille de téléchargement

Le temps et la taille de téléchargement estimés de la page en cours apparaissent au bas de la fenêtre Document. Dreamweaver calculé la taille sur la base du contenu de toute la page, y compris de tous les objets liés tels que les images et les plug-ins.

Dreamweaver estime le temps de téléchargement sur la base de la vitesse de connexion entre dans le volet de la barre d'etat de la boîte de dialogue Préférences. Le temps de téléchargement réel dépend des conditions de traffic Internet générales.

Pour définit les préférences en matière de taille et de temps de téléchargement:

1 Choisissez Édition > Préférences, puis cliquez sur Barre d'Etat.
2 Choisissez une vitesse de connexion avec laquelle calculer le temps de téléchargement.

La vitesse de connexion moyenne est de 28,8. Si vous CONVEÇEZ un site pour intranet, vous pouvez seLECTIONner 1500 (vitesse T1).

CHAPITRE 8

Utilisation de Roundtrip HTML

Roundtrip - Vue d'ensemble

Roundtrip HTML est une fonction unique à Dreamweaver qui permet d'échéanger des documents entre Dreamweaver et un éditeur HTML moyonnant un impact nul ou infime sur le contenu et la structure du code source HTML du document. Dreamweaver conserve et affiche même certains codes HTML techniquement non valides (par exemple, une balise FONT entourant plusieurs balises P) s'ils sont pris en charge par les navigateurs. Le code source HTML généralpDreamweaver lorsquyouééditezest cependant:toujoursvalide.

Voici les fonctions clés de Roundtrip HTML :

• Par défaut, Dreamweaver réécrit les balises qui se chevauchent, ferme les balises qui ne peuvent pas rester ouvertes et supprime les balises de fermeture superflues lorsque vous revenez dans Dreamweaver à partir d'un主编 extrerne ou lorsque vous ouvrez un document HTML existant. Si vous ne voulez pas que Dreamweaver écrase du code source HTML, désissez Édition > Préférences, puis sélectionnez HTML pour désactiver toute réécriture. Voir Paramétrage des préférences de réécriture HTML, page 156.

Dreamweaver affiche des marqueurs dans la fenetre du document pour les codes HTML non valides qu'il ne prend pas en charge. Les balises non valides sont mises en surbrillance en jaune et le texte à l'intérieur de ces balises s'affiche comme du texte ordinaire. Lorsque vous selectionnez la balise non valide, Dreamweaver déscrit l'erreur et la manière de la corriger dans l'inspecteur de propriétés. Si vous désactive la réécriture HTML, Dreamweaver affiche comme non valide tout code HTML qu'il aurait réécrit.

Dreamweaver ne modifie pas les balises qu'il ne reconnait pas (notamment les balises XML) parce qu'il ne dispose d'aucun critère lui permettant de juger de leur validité ou de leur non validité. Toutefois, si ces balises en chevauchent d'autres, il se peut que Dreamweaver les considère comme non valides et les marque comme erronées. Par exemple, la balise personnalisée dans l'exemple suivant seraient marquée comme erronée :

texte.

Dreamweaver ne modifie pas les balises CFML (Cold Fusion Markup Language) ou les balises ASP (Active Server Page), et affiche des icones pour identifier les blocs de code CFML ou ASP dans la fenêtre Document chaque fois que possible. Voir Édition de fichiers Cold Fusion (CFML) et Active Server (ASP) dans Dreamweaver, page 162. Nous vous recommendons de désactiver la réécriture de balises non valides avant d'ouvrir des documents ASP ou CFML dans Dreamweaver. Voir Paramétrage des préférences de réécriture HTML, page 156.
Dreamweaver you permit de lancer un éditeur HTML pour modifier le document en cours. Dreamweaver est intégré avec HomeSite (Windows) et BBEdit (Macintosh). Voir Utilisation d'autres éditeurs HTML, page 161.

Utilisation de l'inspecteur HTML

L'inspecteur HTML affiche le code source du document en cours. Les balises répondent à des codes couleurs conformément aux paramètres définis dans les préférences concernant les couleurs HTML. À mesure que vous ajoutez ou modifier le contenu d'une fenêtre Document, Dreamweaver affiche immédiatement les modifications dans l'inspecteur HTML. Cela fait de l'inspecteur HTML un outil commode pour l'apprentissage du langage HTML si vous ne le connaissiez pas encore, ou pour vous rappeler la syntaxe ou les valeurs appropriées pour un certain nombre de balises et d'attributs spécifique.

Les modifications que vous apportez dans l'inspecteur HTML n'apparaissent dans la fenêtre Document que lorsque vous cliquez à l'écart de l'inspecteur HTML. Dreamweaver ne réécrit jamais le code HTML que vous tapez directement dans l'inspecteur HTML. Si vous entrez un code non valide, Dreamweaver met les balises en surbrillation comme éléments non valides lorsque vous activez la fenêtre Document.

Pour ouvrir l'inspecteur HTML, procédez de l'une des manières suivantes :

• Choisissez Fenêtre > HTML.
• Cliquez sur l'icone de l'inspecteur HTML dans le lanceur ou le mini-lanceur (situé dans le coin inférieur droit de la fenêtre Document).
  Appuyez sur F10.

Pour basculer entre la fenetre du document et l'inspecteur HTML :

Appuyez sur CTRL+TAB (Windows) ou sur Commande+Tab (Macintosh).

Définition de contrôle de format source HTML

Dreamweaver dispose des contrôleurs suivants pour le formatage du code source HTML :

Preférences de réécriture HTML Contrôlent les changements que Dreamweaver apporte évientuèlement à votre code source HTML lorsque vous ouvrez un document HTML. Voir Paramétrage des préférences de réécriture HTML, page 156.

Preférences pour le format HTML Contrôlent des options de formatting HTML ordinaires telles que la longueur de ligne et l'indentation. Voir Paramétrage des préférences de format HTML, page 156.

SourceFormat.profile vous offre un contrôle maximum sur la maniere exacte dont Dreamweaver écrit le langage HTML. Voir Modifier le profil du formatage de la source HTML, page 310.

Preférences pour les couleurs HTML Contrôlent le codage couleur des balises HTML (et le texte qu'elles entourent) dans l'inspecteur HTML. Voir Paramétrage des préférences pour les couleurs HTML, page 158.

Preférences pour les polices/encodages Permettent de spécifier la police dans laquelle le code source HTML s'affiche dans l'inspecteur HTML. Voir Paramétrage des préférences, page 72.

Paramétrage des préférences de réécriture HTML

Les préférences suivantes ont une incidence sur les documents HTML importés. Elles sont sans effet si vous éditez du code HTML dans l'inspecteur HTML. Si vous désactive ces options de réécriture, Dreamweaver affiche des éléments non valides dans la fenêtre Document pour les codes HTML qu'il aurait normalement réécrits.

Corriger lorsque possible les balises incorporement imbriquées et non fermées Réécrit les balises incorporement imbriquées ou se chevauchant. Par exemple, < B > < 1 > texte < B > < 1 / 1 > est réécrit comme < B > < 1 > texte < 1 / 1 > < 1 / B > . Cette option insère également des marques de guillemets de fermeture et des crochets de fermetures s'ils sont absents.

Supprimer balises de fermeture superflues Supprime les balises de fermeture auxquelles ne correspond pas de balise d'ouverture.

M'avertir lors de la correction ou de la suppression de balises Affiche un récapitulatif des codes HTML techniquement non valides que Dreamweaver a tenté de corriger. Ce récapitulatif indique l'emplacement du problème (à l'aide des nombres de ligne et de colonne) de manière à ce que vous puissiez trouver la correction et veiller à ce qu'elle produit l'effect youlu.

Paramétrage des préférences de format HTML

Utilisez les préférences de format HTML suivantes pour contrôler des formatages HTML tels que l'importance du retrait, la longueur de ligne et la hauteur de casse des noms d'élement et d'attributs lorsque vous creez des documents. Voir Modifier le profil du formatage de la source HTML, page 310 pour plus d'informations sur les contrôleles de formatage HTML supplémentaires. Pour appliquer les paramètres de formatage HTML aux documents HTML existants, utilisez la commande Appliquer le formatage source. Voir Formatage du code source HTML dans des documents existants, page 160.

Retrait Active la mise en retrait de toutes les balises marquées INDENT dans SourceFormat.profile. Voir Modifier le profil du formatage de la source HTML, page 310.

Utiliser Spécifique si les retraits doivent être composés d'espaces ou de tabulations.

Lignes et colonnes de tableau Met automatiquement en retrait les balises TR et TD de manière à facilititer la lecture du code du tableau. L'option Retrait doit être activée pour que cette fonction opère.

Cadres et yeux de cadres Met automatiquement en retrait les balises FRAME et les balises imbriquées FRAMESET pour faciliter la lecture des fichiers de jeu de cadres. L'option Retrait doit etre activee pour que cette fonction opere.

Taille du retrait Déterminé la taille des retraits (en espaces ou en tabulations, en fonction du paramétrage du champ Utiliser). Par exemple, si Utiliser est paramétré sur tabulations et Taille du retrait sur 4, les balises seront mises en retrait de quatre tabulations.

Taille de tabulation Détermine la taille des tabulations (exprimées en espaces de caractères).

Remarque: Si Taille du retrait n'est pas un multiple de Taille de tabulation et si Utiliser est paramétré sur tabulations, les balises sont mises en retrait à l'aide d'une combinaison de tabulations et d'espaces de caractères.

Retour à la ligne auto Revient à la ligne (avec un return de chariot) une fois que la largeur de colonne spécifiée est atteinte. Par contraste, la case à cocher Retour à la ligne auto de l'inspecteur HTML ajoute un return pour les lignes dont la longueur dépasse la largeur de la fenêtre.

Suits de ligne Option utile pour spécifique le type de serveur distant (Windows, Macintosh ou Unix) auquel vous envoyez les fischiers. Le choix du type de caractères de saut de ligne approprié garantit que votre code source HTML s'affiche correctement sur le serveur distant. Ce paramètre est également utile lorsque vous travailliez avec un éditeur de texte externe ne reconnaissant que certains types de saut de ligne. Par exemple, utilisez CR LF (Windows) si l'éditeur de texte est Bloc-Notes, et CR (Macintosh) s'il s'agit de SimpleText.

Casse des balises et Casses des attributs Contrôle l'usage de majuscules ou de minuscules pour les noms d' éléments et d'attributs.

Remplacer la casse Sécicie s'il faut convertir les noms d'élément et d'attribut dans la casse spécifiée dans les options précédentes lors de l'ouverture d'un document HTML existant. Par exemple, si vous pouze toujours afficher les noms de certains éléments en caractères minuscules, spécifiez les noms d'éléments en minuscules et activez cette option. Lorsque vous importez un document contenant des noms d'éléments en majuscules, Dreamweaver les convertit tous en minuscules.

Centrer Spécifique si des éléments doivent être centrés à l'aide de DIV ALIGN="center" ou de CENTER. Tous deux font partie de la spécification HTML 4.0 Transitional, mais CENTER est pris en charge par un éventail de navigateurs plus vaste.

Paramétrage des préférences pour les couleurs HTML

Utilisez les préférences de couleurs HTML pour contrôler les couleurs de l'arrière-plan, du texte et des balises dans l'inspecteur HTML.

Couleur d'arrière-plan Sécífie la couleur d'arrière-plan de linspecteur HTML. Cette couleur n'apparaît que lorsque vous cliquez ou tapez dans l'inspecteur ; lorsqu'il n'y a pas de focalisation sur l'inspecteur HTML, la couleur d'arrière-plan est gris moyen.

Texte Spécifique la couleur du texte qui s'inscrit entre les balises (par exemple, dans le code <B> texte </B> , le mot "texte" s'affiche dans la couleur du texte, pas les balises). Pour passer outre la couleur de Texte pour une balise donnée, sélectionnez l'option Inclure contenu.

Commentaires Spécífie la couleur des balises de commentaire (<!--->) et de leur contenu.

Valeur par défaut Spécifie la couleur pour toutes les balises à l'exception des commentaires. Pour outrepasser la couleur Valeur par défaut, définisse la couleur de balises spécifique.

Balise spécifique Vous pouvez passer outre les paramètres de couleur Valeur par défaut et Texte en spécifique une couleur de contenu pour des balises spécifique.

Pour définir la couleur d'une balise spécifique :

1 Sélectionnez une balise dans la zone Balise spécifique.
Cliquez en tenant la touche Maj enforcée pour sélectionner plusieurs balises adjacentes ou cliquez en tenant la touche CTRL (Windows) ou la touche Commande (Macintosh) enforcée afin de sélectionner plusieurs balises adjacentes.
2 Cliquez sur la case d'option à côté de l'échantillon de couleur au bas du panneau et utiliser l'une de ces méthodes pour sélectionner une nouvelle valeur de couleur.
Dans la zone de texte à côté de l'échantillon, tapez une valeur hexadécimale.
- Maintenez le bouton de la souris enforcé tandis que le pointeur est positionné sur l'échantillon de couleur, puis sélectionnez une nouvelle couleur dans la palette de couleurs compatibles avec tous les navigateurs ou avec le/selecteur de couleur du système.
3 Pour colorier le texte entre les balises d'ouverture et de fermeture, cliquez sur Inclure contenu.

Nettoyage de documents HTML

Utilisez la commande Nettoyer HTML pour supprimer des balises vides, combiner des balises FONT imbriquées et apporter d'autres améliorations aux codes HTML désordonnés ouIllisibles.

Pour nettoyer un code HTML :

1 Ouvrez un document existant etCHOISSEz Commandes Nettoyer HTML. Par exemple, < B > < / B > et FONT COLOR "FF0000"> seraient considerees comme des balises vides, tandis que les balises B dans < B> texe < / B> ne le seraient pas.

2 Dans la boite de dialogue qui s'affiche, selectionnez l'une des options suivantes :

Supprimer les balises vides Supprime toute paire de balises sans contenu. Par exemple, les balises B < B et FONT COLOR = "FF0000" < FONT seraient considérées comme des balises vides, tandis que les balises B dans B texte B ne le seraient pas.

Supprimer les balises imbriquées redondantes Supprime toutes les occurrences redondantes d'une balise. Par exemple, dans le code B > C' est ce que je voulais B > vraiement B dire B , les balises B entourant le mot "vraiement" sont redondantes et seraient supprimées.

Supprimer les commentaires HTML ne faisant pas partie de Dreamweaver Supprime tous les commentaires qui n' ont pas ete inseres par Dreamweaver. Par exemple, serait supprimé, mais ne le serait pas (car il s'agit d'un commentaire Dreamweaver qui marque le début d'une région modifiable dans un modele).

Supprimer les commentaires HTML de Dreamweaver Supprime tous les commentaires insérés par Dreamweaver. Par exemple, serait supprimé, mais ne le serait pas (car ce n'est pas un commentaire de Dreamweaver). La suppression des commentaires de Dreamweaver transforme les documents basés sur un module en documents HTML ordinaires et les éléments de la bibliothèque en codes HTML normaux (c'est-à-dire qu'ils ne pourront pas être mis à jour chaque fois que le module original ou l'élement de bibliothèque change).

Supprimer balise(s) spécifique(s) Supprime les balises spécifiées dans la zone de texte adjacente. Utilisez cette option pour supprimer des balises personalisées insérées par d'autreséditeurs visuels et d'autres balises que vous ne voulez pas voir appararître sur le site (par exemple, BLINK). Séperez les balises multiples par des virgules (par exemple, FONT, BLINK).

Combiner les balises imbriquées lorsque possible Consolide deux balises FONT ou davantage lorsqu'elles contrôle l même plage de texte. Par exemple, roge serait changé en roge.

Afficher le journal à la fin Affiche un message d'avertissement détaillant les changements apportés au document des que le nettoyage est terminé.

3 Cliquez sur OK.

En fonction de la taille du document et du nombre d'options sélectionnées, l'opération de nettoyage peut durer plusieurs secondes.

Formatage du code source HTML dans des documents existants

Les options de formatage de source HTML que vous spécifie dans les préférences pour le format HTML et SourceFormat.profile s'appliquent uniquement aux documents que vous créées ensuite avec Dreamweaver. Pour appliquer ces options de mise en forme, aux documents HTML existants, utilisez la commande Appliquer le formatage source.

Pour appliquer des options de formatage de la source HTML à un document existant :

1 Choisissez Fichier > Ouvrir pour ouvrir un fichier HTML existant dans la fenêtre Document.
2 Choisissez Commandes > Appliquer le formatage source.

Correction du code non valide

Si vous voyagez des codes HTML en surbrillance en jaune vif dans la fenêtre Document ou dans l'inspecteur HTML, c'est que Dreamweaver a trouvé des codes HTML non valides qu'il ne peut pas afficher. Ces codes HTML non valides apparaissent souvent lorsque vous commencez à taper une balise dans l'inspecteur HTML, puis basculez vers la fenêtre Document sans compléter la balise.

Pour résoudre le problème, cliquez sur le code HTML non valide de couleur jaune et suivez les suggestions de l'inspecteur de propriétés. Voir aussi Roundtrip - Vue d'ensemble, page 153.

Utilisation d'autres editoruns HTML

Il peut arriver que vous vouliez utiliser un éditeur de texte pour coder manuellement des quantités importantes de code HTML, JavaScript ou VBScript. Dans ce cas, vous pouze utiliser n'importe quel éditeur de texte externe avec Dreamweaver, notamment Bloc-Notes (intégre à Windows 95 et NT) ou SimpleText (intégre au Macintosh), BBEdit, HomeSite, vi, emacs et TextPad.

Les versions commerciales anglaise, française et allemande complètes de Dreamweaver sont livrées avec l'éditeur de texte le plus répandu pour Windows, HomeSite et l'éditeur de texte le plus populaire pour Macintosh, BBEdit. Voir Utilisation d'un éditeur de texte externe avec Dreamweaver, page 161 et Utilisation de BBEdit avec Dreamweaver (uniquement Macintosh), page 162.

Si vous avez achetié Dreamweaver en le téléchargeant, vous pouvez obtenir une copie de HomeSite ou de BBEdit en commandant le CD et le manuel sur le site web de Dreamweaver (http://www.dreamweaver.com/).

Utilisation d'un éditeur de texte externe avec Dreamweaver

Vous pouvez lancer votre éditeur de texte externe depuis Dreamweaver pour éditer la source HTML pour le document en cours, puis revenir à Dreamweaver pour continuer à éditer en bénéficiant de l'interface graphique. Dreamweaver détecte toute modification enregistrée dans le document par l'éditeur externe et vous invite à recharger le document.

Pour désirir un éditeur externe :

1 Choisissez Édition > Préférences.
2 Sélectionnez Éditeurs externes dans la liste Catégorie de gauche.
3 Cliquez sur le bouton Parcourir à côté du champ HTML pour sélectionner un éditeur de texte.
4 Dans l'option Synchroniser les fichiers externes, spécifie ce que vous pouze que Dreamweaver fasse lorsqu'il détecte que des changements ont ete apportes de I'extérieur a un document ouvert dans Dreamweaver.
5 Dans Au démarrage, spécifie la manière dont Dreamweaver doit Traitser les documents avant de lancer l'éditeur.

Pour lancer l'éditeur externe :

• Choisissez Édition > Lancer éditeur externe ou cliquez sur Éditeur externe dans la barre de titre de la fenêtre HTML.

Utilisation de BBEdit avec Dreamweaver (uniquement Macintosh)

Lorsqu'un document est ouvert à la fois dans BBEdit et dans Dreamweaver, le fait de basculer d'une application à l'autre met le document à jour. En outre, les deux programmes suivant la sélection en cours. Par exemple, vous pouvez opérer une sélection dans Dreamweaver puis basculer vers BBEdit où le même élément sera sélectionné.

Vou puez desactiver l'intégration BBEdit si vous préférez travailler avec une version antérieure de BBEdit ou un autre editor de texte HTML. Voir Utilisation d'un éditeur de texte externe avec Dreamweaver, page 161. Les sélections ne sont pas suivies si l'intégration BBEdit est désactivée.

Pour utiliser BBEdit avec Dreamweaver :

1 Procedez de l'une des manieres suivantes:
- Choisissez Édition > Lancer BBEdit.
- Cliquez sur BBEdit dans le coin supérieur droit de l'inspecteur HTML.
2 Apportez les modification souhaitées dans BBEdit.
3 Cliquez sur le bouton Dreamweaver de la palette d'outils HTML dans BBEdit.

Pour désactiver l'intégration BBEdit :

1 Choisissez Édition > Préférences.
2 Sélectionnez Éditeurs externes dans la liste Catégorie de gauche.
3 Désactivez Activer l'intégration de BBEdit, puis cliquez sur OK.

Édition de fichiers Cold Fusion (CFML) et Active Server (ASP) dans Dreamweaver

Avant d'ouvrir un fjichier CFML ou ASP dans Dreamweaver, choisissez Édition > Préférences, puis sélectionnez HTML et désactivez les options Corriger lorsque possible les balises incorporement imbriquées et non fermées et Supprimer balises de fermeture superflues.

Dreamweaver affiche des icones pour identifier des blocs de code CFML ou ASP dans la fenêtre Document chaque fois que possible.

Pour modifier un bloc de code ASP dans la fenêtre Document :

1 Cliquez sur le marqueur jaune ASP pour le seLECTIONner.
2 Dans l'inspecteur de propriétés, cliquez sur le bouton Édition.
3 Dans la boîte de dialogue qui s'affiche, éditez le code ASP, puis cliquez sur OK.

Pour modifier un bloc de code CFML dans la fenêtre Document :

1 Cliquez sur le marqueur FML pour le selectionner.
2 Dans l'inspecteur de propriétés, procédez de l'une des manières suivantes :
- Cliquez sur le bouton Attributes pour modifier les attributs existants des balises et leurs valeurs, ou pour en ajouter de nouveaux.
- Cliquez sur le bouton Contenu pour modifier le contenu inséré entre les balises CFML d'ouverture et de fermeture. Si la balise selectionnée est vide (c'est-à-dire s'il n'y a pas de balise de fermeture), le bouton Contenu est désactisé.

Si vous ne VOYZ pas de marqueurs l'ou vous savez qu'il y a des codes ASP ou CFML, commencez par vous assurer que l'options Affichage > Éléments invisibles est activée. Si c'est le cas et si les iconônes ne sont toujours pas visibles, Dreamweaver ne reconnaît pas le code comme CFML ou ASP. Ceci peut se produit lorsque des conditions sont insérées dans les balises HTML, comme dans le code ASP

suivant :

<input type="checkbox" name="mois" value="octobre"
<% if mois="octobre" then %>coché<% end if %> 

Pour éoperator un code CFML ou ASP lorsqu'aucun marqueur n'apparait :

1 Dans la fenêtre Document, positionné le curseur pres de l'endetroit où vous savez qu'il existe un code CFML ou ASP.
2 Choisissez Fenetre > HTML pour ouvrir l'inspecteur HTML.
3 Cliquez sur la barre de titre ou la barre d'etat de l'inspecteur HTML.
Ne cliquez pas au milieu de l'inspecteur, sans quoi vous écarteriez le curseur du code CFML ou ASP que vous pouze(eder.
4 Editez le code directement dans l'inspecteur HTML.
5 Appuyez sur F10 pour fermer l'inspecteur HTML et revenir à la fenêtre Document.

Pour plus d'informations sur le traitement des codes CFML ou ASP et l'affichage des résultats dans la fenêtre Document, voir Extending Dreamweaver overview dans les pages d'aide HTML de Dreamweaver.

Insertion de scripts

Vou puevez entrer des éléments JavaScript et VBScript dans la fenetre Document sans devoir utiliser l'inspecteur HTML.

Pour afficher les marqueurs de script dans la fenêtre du document,CHOISSE AFFICHAGE > Éléments invisibles. Voir aussi Paramétrage des préférences pour les éléments invisibles, page 85.

Pour insérer un script :

1 Placez le curseur la où vous voulez insérer le script.
2 Cliquez sur le bouton Script de la palette d'objets ou sur Insertion > Script.
3 Dans la boîte de dialogue qui s'affiche,CHOISISEZ le langage de script dans le menu déroulant.

Si vous utilisez JavaScript sans etre certain de la version, choisissez JavaScript plusot que JavaScript1.1 ou JavaScript1.2.

4 Entre le code qui doit s'afficher entre les balises du script.

Pour creer un lien vers un fisier de script externe, cliquez sur OK sans rien taper, puis ajoutez la referrerce au fisier source dans l'inspecteur de propriétés (tapez le nom du fisier dans le champ Source ou cliquez sur l'icone de répertoire pour naviguer vers le fisier et le selectionner).

Pour éoperator le script :

1 Cliquez sur l'icone Script.
2 Dans l'inspecteur de propriétés, cliquez sur Édition.

Paramétrage des propriétés de script

Voici les propriétés qui apparaissent dans l'inspecteur de propriétés lorsqu'un marqueur de script est sélectionné :

Language Spécifie soit JavaScript soit VBScript comme langage pour le script.

Source Spécifique un fjichier de script lié à l'extérieur. Tapez le chemin d'accès ou cliquez sur le réseau pour sélectionner le fjichier.

Modifier Oùvre la fenêtre Script, qui permet de modifier le script.

Insertion de commentaires

Un commentaire est un texte descriptif que vous insérez dans le document HTML pour expliquer le code ou fournir d'autres informations. Un commentaire n' affecte en rien l'aspect du document dans le navigateur.

Voir aussi Paramétrage des préférences pour les éléments invisibles, page 85.

Pour insérer un commentaire :

1 Placez le curseur la où vous voulez insérer le commentaire.
2 Cliquez sur le bouton Commentaire de la palette d'objets ou sur Insertion > Commentaire.

Pour afficher les marqueurs de commentaire dans la fenêtre Document, désissez Affichage > Éléments invisibles.

Pour entrer un texte de commentaire :

1 Cliquez sur l'icone Commentaires.
2 Entrez un texte dans l'inspecteur de propriétés.

Le fait de creer un commentaire génére le code HTML suivant :

Texte de commentaire-

CHAPITRE 9

Formatage du texte

Formatage du texte - Vue d'ensemble

Le formatage dans Dreamweaver ressemble à celui d'un logiciel de traitement de texte standard. Utilisez le menu Texte > Format ou le menu contextualu Format dans l'inspecteur des propriétés pour définir le style par défaut (paragraphe, préforme, En-tête 1, En-tête 2, et ainsi de suite) d'un bloc de texte.

Pour modifier la police, la taille, la couleur et l'alignement d'un texte seLECTIONné, utilisez le menu Texte ou l'inspecteur des propriétés, ou utilisez les styles pour définir l'apparace de tout le texte appartenant à une catégorie particulière.

Les commandes du menu Texte et de l'inspecteur des propriétés formant le texte à l'aide de balises HTML standard, (telles que B, FONT et CODE), compatibles avec les navigateurs les plus courants. Les styles personnalisés utilisent des feuilles de style en cascade (CSS) pour définir l'affichage de tout le texte d'une classe particulière ou pour redéfinir le formatage d'une balise spécifique (telle que H1, H2, P ou L), et ils sont pris en charge par Netscape Navigator 4.0 ou supérieur, et par Microsoft Internet Explorer 3.0 ou supérieur. Vous pouvez utiliser les deux styles et le formatage HTML dans la même page, mais comme avec les logiciels de traitement de texte, le formatage appliqué à l'aide du menu Texte ou de l'inspecteur des propriétés remplace le formatage de la feuille de style pour le texte sélectionné.

Pour plus d'informations sur l'utilisation des styles pour le formatage, voir Formatage du texte avec des feuilles de style, page 174.

Formatage du texte avec les balises HTML

La Specification d'HTML 4.0 Announced par le Consortium du World Wide Web (W3C) début 1998, décourage l'utilisation des balises de formatage HTML, (telles que B, I, FONT et CENTER) et approuve les feuilles de style en cascade. Toutefois, si les balises de formatage HTML offrent un contrôle plus limité de l'affichage du texte que les feuilles de style, en revanche, elles sont prises en charge par un plus grand nombre de navigateurs. Pour cette raison, il est probable que les balises de formatage HTML continuente à faire partie de l'arsenal du développement de site web, tant que les navigateurs 3.0 et plus anciens représentent une proportion non négligeable du traffic sur le web.

Pour obtenir des informations spécifiques sur le formatage avec les balises HTML, voir l'une des rubriques suivantes :

Modification des caractéristiques de la police, page 169
Modificaton de la couleur du texte, page 171
Alignment du texte et des éléments, page 172

Les balises HTML qui définissent la structure du document只会 être l'objet dont il s'affiche – par exemple, les en-têtes, les paragraphs et les listes – est un excellent moyen de désignation. En fait, si vous envisisçez d'utiliser des feuilles de style pour désigner les caractéristiques de police de votre page, it is important that you use the functionalities of these balises d'en-tête standard, car elles aient à préserver la structure de leur page dans les navigateurs qui ne prennten pas en charge les feuilles de style (pour voir un exemple, consultez les pages HTML de l'aide de Dreamweaver dans un navigateur 3.0). Voir Application des balises de paragraphe et d'en-tête, page 168.

Application des balises de paragraphe et d'en-tête

Utilisez le menu contextuel Format dans l'inspecteur des propriétés ou le menu Texte > Format pour appliquer les balises standard de paragraphe et d'en-tête. Pour redéfinir la façon dont les balises de paragraphe et d'en-tête apparaissent, utilisez les feuilles de style. Voir Formatage du texte avec des feuilles de style, page 174.

Pour appliquer une balise de paragraphe ou d'en-tête :

1 Placez le curseur dans le paragraphe ou selectionnez tout ou partie du texte dans le paragraphe.
2 Choisissez un style de paragraphe à partir du menu contextuel Format dans l'inspecteur des propriétés ou à partir du menu Texte > Format. Choisissez Aucun pour supprimer un style de paragraphe.

La balise associée au style sélectionné, (par exemple, P pour paragraphe, H1 pour En-tête 1, PRE pour Préforme et ainsi de suite) est appliquée à tout le paragraphe.

Modification des caractéristiques de la police

Utilisez l'inspecteur des propriétés ou le menu Texte pour modifier les caractéristique de la police du texte sélectionné.

Pour modifier les caractéristiques de police :

1 Sélectionnez le texte. Si aucun texte n'est sélectionné, la modification s'applique au texte suivant que vous entrez.
2 Choisissez une des options suivantes :

Pour modifier la police,CHOISSEZ une combinaison de polices a partir de l'inspecteur des propriétés ou a partir du menu Texte > Police.

Les navigateurs affichent le texte dans la première police de la combinaison installée sur votre système. Si aucune des polices listedes n'est installée, le navigateur affiche le texte selon les préférences du navigateur. Voir Modification des combinaisons de polices, page 170. L'option Par défaut utilise la police par défaut pour le texte sélectionné (soit la police par défaut du navigateur, soit la police attribuée à cette balise dans une feuille de style). Utilisez cette option pour supprimer les types de police précédemment appliqués.

Pour modifier le style de police, cliquez sur Gras ou Italique dans l'inspecteur des propriétés ou choisissez-en un, (Gras, Italique ou Souligné) à partir du menu Texte > Style.
Pour modifier la taille de la police,CHOISSEZ une taille (de 1 à 7) à partir de l'inspecteur des propriétés ou à partir du menu Texte > Taille.

Les tailles de police HTML sont relatives ; ce ne sont pas des tailles de points spécifique. Les utilisateurs définissant le corps de la police par défaut pour leur navigateur ; il s'agit du corps affiché lorsque Par défaut ou 3 est seLECTIONné dans l'inspecteur des propriétés ou à partir du menu Texte > Taille. Les tailles 1 ou 2 apparaîtront plus petites que celle de la police par défaut ; les tailles de 4 à 7 apparaîtront plus grandes. Pour que le texte s'affiche constamment dans une taille de point particulière, utilisez les feuilles de style.

Pour augmenter ou réduire la taille du texte sélectionné,CHOisissez une taille relative (de + / - 1 à + / - 7) à partir de l'inspecteur des propriétés ou a partir du menu Texte > Augmenter taille/Réduire taille.

Les chiffres indiquent une différence relative par rapport à la taille de la balise BASEFONT. La valeur par défaut de BASEFONT est 3. Ainsi, une valeur +4 résultat en une taille de police 7. Dreamweaver n'affiche pas la balise BASEFONT (qui va dans HEAD), mais la taille de police devrait s'afficher correctement dans un navigateur.

Modification des combinaisons de polices

Utilisez la commande Modifier la liste des polices pour définir les combinaisons de polices qui apparaissent dans l'inspecteur des propriétés et dans le menu Texte > Police.

Pour modifier les combinaisons de polices :

1 Choisissez Texte > Police > Modifier la liste des polices.
2 Sélectionnez la combinaison de polices à partir de la liste de menu de police en haut de la boîte de dialogue.

Les polices dans la combinaison selectionnée sont listedes dans la liste Police choisisies dans le coin inférieur gauche de la boîte de dialogue. À sa droite se trouve une liste de toutes les polices installées sur votre système.

3 Choisissez une des options suivantes :

Pour ajouter ou supprimer des polices dans une combinaison, cliquez sur les boutons directionnels entre les listedes Polices choisis et Polices disponibles.
Pour ajouter ou supprimer une combinaison de polices, cliquez sur les bouton plus (+) et moins (-) respectivement, en haut de la boite de dialogue.
Pour ajouter une police qui n'est pas encore installée sur votre système, saisissez son nom dans la zone de texte en-dessous de la liste Polices disponibles et cliquez sur la flèche directionnelle pour l'ajouter à la combinaison. Ajouter une police non installée à votre système peut s'avérer utile, par exemple, pour spécifique une police Windows lorsque vous travailliez sur un Macintosh.
Pour déplacer la combinaison de polices vers le haut ou vers le bas de la liste, cliquez sur les flèches directionnelles au sommet de la boîte de dialogue.

Pour ajouter une nouvelle combinaison à la liste des polices :

1 Choisissez Texte > Police > Modifier la liste des polices.
2 Sélectionnez une police à partir de la liste Polices disponibles et cliquez sur le bouton << pour déplacer la police vers la liste Polices choses.
3 Repetez l'etape 2 pour chaque police suivante de la combinaison.

Pour ajouter une police qui n'est pas encore installée sur votre système, saississez son nom dans la zone de texte en-dessous de la liste Polices disponibles et cliquez sur le bouton << pour l'ajouter à la combinaison. Ajouter une police non installée à votre système peut s'avérer utile, par exemple, pour spécifique une police Windows lorsque vous travailliez sur un Macintosh.

4 Lorsque vous avez fini la sélection des polices spécifique,CHOisissez une famille de police generique a partir du menu Polices disponibles et cliquez sur le bouton << pour la déplacer vers la liste Polices choisisies.

Les familles de police génériques complrennent cursive, fantastie, espacement fixe, sans-serif et serif. Si aucune des polices de la liste Polices choisisies n'est disponible sur le système de l'utilisateur, le texte s'affiche dans la police par défaut associée à la famille de police générique. Par exemple, la police d'espacement fixe par défaut est Courier sur la plupart des systèmes.

Modification de la couleur du texte

Vous pouvez modifier la couleur d'un texte sélectionné de façon à ce que la nouvelle couleur remplace la couleur définie dans les propriétés de la page.

Pour modifiez la couleur du texte :

1 Sélectionnez le texte.
2 Choisissez une des options suivantes :

• Choisissez une couleur à partir de la palette des couleurs garanties pour les navigateurs, enclistant sur la boite de couleur dans l'inspecteur des propriétés.
• Choisissez Texte > Couleur. Le sélection de couleurs système s'affiche. Sélectionnez une couleur et cliquez sur OK.
  Pour définiir la couleur du texte par défaut, utilisez la commande Modifier > Propriétés de la page. Voir Paramétrage des couleurs de texte par défaut, page 87.

Pour restaurer la couleur par défaut du texte :

1 Dans l'inspecteur des propriétés, cliquez sur la boite de couleur pour ouvrir la palette des couleurs garanties pour les navigateurs.
2 Cliquez sur le bouton Par défaut (le bouton du milieu dans le coin inférieur droit).

Alignement du texte et des éléments

Alignez le texte sur la page à l'aide de l'inspecteur des propriétés ou du menu Texte > Alignement. Centrez un élément sur la page à l'aide de la commande Texte > Alignement > Centrer.

Pour aligner du texte :

1 Sélectionnez le texte que vous pouze aligner.
2 Cliquez sur une option d'alignement (à gauche, à droite, ou centré) dans l'inspecteur des propriétés, ou choisissez Texte > Alignment et choisissez une option.

Pour centrer un élément :

1 Sélectionnez l'objet désiré (image, plug-in, tableau, ou un autre éléments de page).
2 Choisissez Texte > Alignment > Centre.

Pour mesure du texte en retrait ou pour supprimer un retrait :

1 Sélectionnéz le texte désiré.
2 Cliquez sur le bouton Retrait ou Retrait négatif dans l'inspecteur des propriétés, choisissez Texte > Retrait ou Retrait négatif, ou Liste > Retrait ou Retrait négatif à partir du menu contextual.

Cela applique ou supprime la balise BLOCKQUOTE lorsque le texte seLECTIONné est un paragraphe ou un en-tête ; cela ajoute ou supprime une balise UL ou OL lorsque le texte seLECTIONné est une liste.

Creation de listedes

Vou puez creer des listedes numerotées, à puces et de définition à partir d'un nouveau texte que vous tapez dans la fenêtre Document ou à partir d'un texte existant. Les listedes peuvent également être imbriquées.

Pour creer une nouvelle liste :

1 Positionnéz le curseur sur la ligne où vous souhaitez ajouter une liste de nouveaux éléments.
2 Cliquez sur les boutons de la liste à pucees ou de la liste numéroétée dans l'inspecteur des propriétés, ou choisissez Texte >liste et seLECTIONnez le type de liste souhaïte -liste à pucees, numéroétée ou de définition.
3 Commencez à entrer la liste, appuyez sur Entrée pour passer à un autre élément de la liste.
4 Pour terminer la liste, appuyez deux fois sur Entrée.

Pour creer une liste à l'aide d'un texte existant :

1 Sélectionnez une série de paragraphs à partir desquels vous voulez constituer une liste.
2 Cliquez sur le bouton de la liste à pucees ou de la liste numérorotée dans l'inspecteur des propriétés, ou choisissez Texte >liste et Sélectionnez le type de liste souhaïte -liste à pucees, numérorotée ou de définition.

Pour creer une liste imbriquee :

1 Sélectionnez les éléments de la liste que vous pouze imbriquer.
2 Cliquez sur le bouton Retrait dans l'inspecteur des propriétés ou choisissez Texte > Retrait.

Formatage du texte avec des feuilles de style

Un style est un groupe d'attributs de formatage qui contrôle l'affchage d'un bloc ou d'une plage de texte. Utilisez les styles pour définir le format d'un seul document, ou utilisez une feuille de style externe (stockée à l'extérieur et liée au document courant) pour contrôle plusieurs documents à la fois. Une feuille de style inclut tous les styles d'un document.

Les styles sont identifiés par un nom ou par une balise HTML, ce qui vous permet de modifier l'attribut d'un style et de voir instantanément les résultats sur tout le texte auquel ce style est appliqué. Les styles des documents HTML peuvent contrôler la plupart des attributs de formatage de texte traditionnels, tels que la police, la taille et l'alignement. Ils peuvent également spécifique des attributs HTML-Uniques, tels que le positionnement, les effets spéciaux ou les déplacements de souris sur des zones sensibles.

Les feuilles de style sont dans la partie HEAD d'un document et définitent une série de styles. Les styles peuvent définir les attributs de formatage pour les balises HTML, les parties de texte identifiées par un attribut de classe ou le texte correspondant à un critère conforme à la Specification des feuilles de style en cascade (CSS). Dreamweaver reconnaît les styles définis dans les documents tant qu'ils sont conformes aux directives de CSS.

Les feuilles de style fonctionnent avec les navigateurs 4.0 et plus récents. Internet Explorer 3.0 reconnaît certains attributs de style, ce qui n'est pas le cas pour la plupart des navigateurs plus anciens.

Il y a trois types de style dans Dreamweaver :

• Les styles des balises HTML redéfinissent le formatage pour une balise particulière, celle que H1. Lorsque vous creez un style pour la balise H1,tout le texte avec la balise H1 est modifié instantanément.
• Les styles personnalisés sont similaires aux styles que vous utilisez dans un logiciel de traitement de texte, mis à part le fait qu'il n'y a pas de distinction entre le style des caractères et celui des paragraphs. Vous pouvez appliquer des styles personnalisés à n'importe quel bloc ou n'importe celle plageertexte. Si le style est appliqué à un bloc de texte, (tel que tout un paragraphe ou une liste à puces), un attribut CLASS est ajouté à la balise du bloc, (par exemple, P CLASS="monStyle" ou UL CLASS="monStyle"). Si le style est appliqué à une plage de/DD, les balises SPAN contenant l'attribut CLASS sont insérées autour du textile seLECTIONné. Voir Application d'un style personnalisé, page 179.
• Les styles du selector CSS redéfinissant le formatage d'une combinaison de balises spécifique, (par exemple, TD H2 est appliquée chaque fois que l'en-tête H2 apparait dans une cellule de tableau), ou de toutes les balises qui contiennent un attribut ID spécifique, (par exemple, #monStyle s'applique à toutes les balises contenant la valeur d'attribut paire ID="monStyle").

Le formatage du texte qui est appliqué manuellement à différentes parties du texte est prioritaire sur les autres styles. Pour que les styles contrélont le formatage du texte d'un paragraphe, supprimez tous les autres paramètres de formatage.

Voussouspoucez parametrer tous les attributs de styledéfinis par la Specification CSS1 dans Dreamweaver, mais tous les attributs n'apparaissent pas dans la fenêtre Document. Les attributs qui n'apparaissent pas sont marqués d'un astérisque (^*) dans la boîte de dialogue Définition du style. Il faut aussi notes que certains des attributs de style CSS que vous pouvez définir avec Dreamweaver apparaiscent différemment dans Microsoft Internet Explorer 4.0 et Netscape Navigator 4.0, alors que d'autres ne sont pris en charge par chaque navigateur.

À propos des feuilles de style

Le Consortium du World Wide Web est responsable de la Specification des feuilles de style en cascade (CSS1), qui définit les propriétés du style (par exemple, la police, la couleur, le replissage, la marge, l'espacement entre les mots), afin de contrôler comment les éléments apparaissent. Dreamweaver vous permet de définir toutes les propriétés de CSS1. Voir Formatage du texte avec des feuilles de style, page 174.

Dans Microsoft Internet Explorer 4.0, vous pouvez utiliser un langage de script tel que JavaScript ou VBScript pour modifier les propriétés du positionnement et du style des éléments une fois que la page est chargée. Avec Netscape Navigator 4.0, vous ne pouvez pas modifier les propriétés du style une fois que la page est chargée, mais vous pouvez modifier les propriétés du positionnement.

Création ou lien à une feuille de style externe

Une feuille de style externe est un fichier texte contenant seulement des specifications de style. L'edition d'une feuille de style externe affecte tous les documents qui y sont liés.

Les pages d'aide HTML de Dreamweaver utilisent une feuille de style liée appelée help.css. Ouvrez ce fjchier (situé à l'intérieur du dossier Help/html) dans un éditeur de texte pour voir a quoi ressemble le code d'une définition de style. Ouvrez l'un des fjchiers de rubrique (ceux commençant par un numéro) pour voir comment la feuille de style est liée au document au moyen d'une balise LINK, et comment les styles spécifique sont appliqués.

Pour creer ou lien une feuille de style externe :

1 Choisissez Fenetre > Styles ou cliquez sur Styles dans le lanceur.
2 Dans la palette Styles, cliquez sur Feuille de style.
3 Dans la boite de dialogue Editor Feuille de style, cliquez sur Lien.
4 Effectuez l'une des opérations suivantes :
Entrez le chemin d'accès à la feuille de style externe dans le champ Fichier/URL.
- Créez une nouvelle feuille de style externe en entrant un nom de fichier qui n'existe pas à l'emplacement spécifique.

Les feuilles de style externes doivent se terminer par l'extension.css.

5 Choisissez Link ou Import pour spécifique la balise utilisé pour lier la feuille de style externe puis cliquez sur OK.

Alors que IMPORT et LINK créé toutes deux tous les styles dans la feuille de style distante disponible pour le document en cours, LINK est la balise qui offre le plus de fonctions, et qui fonctionne avec le plus de navigateurs.

La feuille de style externe apparait avec le mot "lien" à la suite du nom, dans la liste des styles de la boîte de dialogue Éditer Feuille de style. Ne suivez la procédure suivante que si vous pouze créé ou éditer des styles dans la feuille de style externe.

6 Double-cliquez sur le nom de la feuille de style.
Une seconde boîte de dialogue Éditer Feuille de style apparait.
7 Cliquez sur Nouvelle pour définir les styles dans la feuille de style externe.
8 Cliquez sur Enregistrer lorsque vous avez fini de définir les styles.

Modification d'une feuilles de style externe

L'edition d'une feuille de style externe affecte tous les documents qui y sont liés.

Pour modifier une feuille de style externe :

1 Ouvrez n'importe quel document lie à la feuille de style externe que vous poulez modifier.
2 Choisissez Fenetre > Styles ou cliquez sur le bouton Styles dans le lanceur.
3 Cliquez sur le bouton Feuille de style dans la palette Styles.
4 Dans la boite de dialogue Éditer Feuille de style, double-cliquez sur le nom de la feuille de style externe.

Une seconde boîte de dialogue Éditer Feuille de style apparait, elle affiche les styles de la feuille de style externe.

5 Editez les styles de la feuille de style externe, puis cliquez sur Enregister, lorsque vous avez fini.

Ceci afferce tous les documents liés à la feuille de style externe.

Creation d'un style

Creez un style pour automatiser le formatage des balises HTML ou des blocs et des plages de texte identifiés par un attribut CLASS.

Pour creer un style :

1 Choisissez Fenêtre > Styles et cliquez sur le bouton Feuille de style dans la palette de styles.
2 Dans la boîte de dialogue Éditer Feuille de style, cliquez sur Nouvelle.
3 Effectuez votrechoix à partir des types de style suivants :

Créer un style personnelisé ( classe) creé un style pouvant être appliqué comme un attribut CLASS à une plage ou un bloc de texte.

Redéfinir la balise HTML redéfinit le formatage par défaut d'une balise HTML spécifique.

Utiliser le selectorateur CSS définit le formatage d'une combinaison de balises particulière ou de toutes les balises contenant un attribut ID spécifique.

4 Entrer un nom, une balise ou un sélecteur pour le nouveau style, en respectant les conventions suivantes :
- Les noms de style personnelisé doivent commencer par un point. Si vous n'entrez pas le point, Dreamweaver le fera pour vous.
Pour les styles de balise HTML, entrez une balise HTML ouCHOisissez-en une a partir du menu contextual.
Pour un selecteur CSS, entrez tout critère de selectioneur valide (par exemple, TD H2 ou #monStyle), ouCHOISEZ un selecteur à partir du menu contextual.
5 Cliquez sur un nom du panneau de gauche de la boîte de dialogue, puis choisissez les paramètres de formatage du nouveau style dans l'écran correspondant. Laissez les attributs vides, s'ils ne sont pas importants pour le style.

Les attributs qui n'apparaissent pas dans la fenêtre Document sont marqués d'un astérisque (*) dans la boîte de dialogue Définition du style. Certains des attributs de style CSS que vous pouvez définir avec Dreamweaver apparaissent différemment dans Microsoft Internet Explorer 4.0 et Netscape Navigator 4.0, alors que d'autres ne sont pris en charge par chaque navigateur.

Pour obtenir des informations sur des configurations particulières, voir les rubriques suivantes des pages d'aides de Dreamweaver :

Panneau Definition du style de type
Panneau Definition du style de l'arriere-plan
- Panneau Définition du style du bloc
Panneau Definition du style de la boîte
Panneau Definition du style de la cordure
- Panneau Définition du style de la liste
- Panneau Définition du style du du positionnement
Panneau Definition du style des extensions

Lorsque vous creez un style personnelisé ( classe), il apparait dans la palette de styles et dans le menu Texte > Style personnelisé. Les styles de balise HTML et de sélecteur CSS n'apparaissent pas dans la palette de styles car ils ne peuvent pas être appliqués. Ces styles sont automatiquement reflétés dans la fenêtre Document, partout où la balise ou le sélecteur figure.

Application d'un style personnalisé

Les styles personnalisés ( classe) sont les seuls types de style pouvant être appliqués au bloc de texte d'un document, quelles que soient les balises qui contrôle le texte. La palette de style affiche les noms de tous les styles de classe disponibles.

Ne confondez pas les styles personnalisés avec les options, telles que Gras ou Variable dans le menu Texte > Style ; ces options sont des attributs de formatage prédéfinis qui correspondent à des balises HTML spécifiques.

Lorsque vous appliquez plus d'un style au même texte, il se peut que les styles soient incompatibles et que cela produit un résultat inattendu. Voir À propos des styles incompatibles, page 180.

Pour appliquer un style personnelé :

1 Choisissez Fenetre > Styles.
2 Sélectionnez le texte auquel vous voulez appliquer un style.

Placez le curseur dans un paragraphe pour appliquer le style à tout le paragraphe.

Pour spécifier la balise exacte à laquelle le style devrait être appliqué, sélectionnez la balise avec le selecteur de balise dans la partie inférieure gauche de la fenêtre Document. Vous pouvez aussi modifier la selection de la balise avec le menu contextual Appliquer à, dans la palette de style.

Si vous seLECTIONnez seulement une partie d'un paragraphe, le style affectera seulement cette partie.

3 Cliquez sur un nom de style dans la palette de style.

Voussousayessuipliqueunstylepersonnaliseenchoisissantunnomdestylea partir du menu Texte Stylepersonnalise,oucliquezavecleboutondroitde la souris(Windows)ouContrrole-cliquez(Macintosh)，puischoisissezlenomdu stylea partir du menuStylepersonnalisedansle menucontextuel.Lalalise de la selection courante apparaita cotéde la commandeStylepersonnalise.

À propos des styles incompatibles

Lorsque vous appliquez plus d'un style au même texte, il se peut que les styles soient incompatibles et que cela produit un résultat inattendu. Les navigateurs appliquent les attributs de style en fonction des règles suivantes :

Si deux styles sont appliqués au même texte, le navigateur affiche les attributs des deux styles, à moins que certains attributs soient incompatibles. Par exemple, un style pourrait spécifique bleu pour la couleur du texte, alors que l'autre style spécifiqueait rouge.
- Si les attributs de deux styles appliqués au même texte sont incompatibles, le navigateur affiche l'attribut du style le plus à l'intérieur (le style le plus proche du texte lui-même).
- S'il s'agit d'une incompatibilité directe, les attributs des styles personnalisés (style appliqué avec l'attribut CLASS) replacent les attributs des styles de balise HTML.

Dans l'exemple suivant, le style défini pour H1 pourrait spécifique la police, la talle et la couleur de tous les paragraphs H1, mais le style personnelisé. Bleu appliqué à ce paragraphe remplace la couleur configurée dans le style de H1. Le second style personnelisé. Rouge remplace. Bleu, car il se trouve à l'intérieur du style. Bleu.

Ce paragraphe est contrôle par le style personnalisé .Bleu et par le style de balise HTML H1. style de balise HTML.Cette phrase est une exception, elle est contrôle par le style .Rouge. Nous voici revenu au style .Bleu.

Modification d'un style

Lorsque vous éditez un style qui contrôle le texte de votre document, vous reformatez instantanément tout le texte contrôle par ce style.

Pour éditer un style :

1 Choisissez Texte > Style personnelisé > Éditer Feuille de style, ou cliquez sur le bouton Feuille de style dans la palette de styles.
2 Choisissez un style dans la boite de dialogue d'edition, puis cliquez sur Editor.
3 Cliquez sur un nom dans la liste de gauche de la boîte de dialogue, puis désisissez les nouveaux paramètres de formatage du style dans l'écran de droite correspondant. Laissez les attributs vides, s'ils ne sont pas importants pour le style.

Utilisation de la palette de styles

Utilisez la palette de styles pour appliquer des styles personnalisés à la sélection courante. Lapalette de styles affiche seulement des styles personnalisés ( classe) ; les styles de balise HTML et du.selecteur CSS n'apparaissent pas dans la palette de styles car ils sont appliqués automatiquement au texte contrôle par la balise ou le selecteur spécifique.

Choisissez Fenêtre > Styles pour afficher la palette de style.

Applique à Affiche la balise de la seLECTION courante. Choisissez une balise à partir du menu contextual, afin d'en selectionner une différente.

Feuille de style Ouvre la boîte de dialogue Éditer feuille de style. Vous pouvez éditer tous les styles dans le document courant ou dans une feuille de style distante.

Voir aussi Formatage du texte avec des feuilles de style, page 174.

Remarque: Cliquez avec le bouton droit de la souris (Windows) ou cliquez sur la palette Style tout en appuyant sur la touche Ctrl (Macintosh), afin d'ouvoir un menu contextualuel incluant les commandes Édition, Dupliquer, Supprimer, et Appliquer.

Configuration des préférences du format des feuilles de style

Les préférences du format des feuilles de style contrôle l'objet dont Dreamweaver écrit le code qui définit les styles. Les styles peuvent être écrites sous forme de sténographie, pour en faciliter l'utilisation pour certaines personnes. Certains navigateurs plus anciers n'interpréten pas la sténographie correctement. À moins que vous ne vouliez que Dreamweaver écrive les styles en sténographie, il n'y a aucune raison de modifier les préférences des feuilles de style.

Choisissez Édition > Préférences, puis cliquez sur Feuilles de style pour afficher les préférences du format des feuilles de style. Voir aussi Formatage du texte avec des feuilles de style, page 174.

A la création de nouveaux styles, Utiliser sténographie pour Déterminé les attributs de style que Dreamweaver écrit en sténographie.

A l'édition de styles existants, Utiliser sténographie Contrôle si Dreamweaver réécrit les styles existants en sténographie. Choisissez Si l'original utilise Sténographie pour que Dreamweaver laisse tous les styles tels qu'ils sont. Choisissez En fonction des paramètres ci-dessus, pour que Dreamweaver réécrive les styles en sténographie, selon les attributs spécifique dans les cases à cocher Utiliser Sténographie pour.

Conversion des styles CSS en code HTML

Si vous avez utilisé des styles CSS pour spécifier le formatage du texte, (tel que la famille, la taille, la couleur et la décoration des polices) et que plus tard vous decide de prendre le formatage visible dans un navigateur 3.0, vous pouvez utiliser Fichier > Convertir > Compatible navigateur 3.0 pour convertir autant d'informations de style que possible en balises HTML.

Pour convertir un fichier qui utilise des styles en fichier compatible pour les navigateurs 3.0 :

1 Choisissez Fichier > Convertir > Compatible navigator 3.0.
2 Dans la boîte de dialogue qui apparaît, choisissez Styles CSS en balises HTML.

Lorsque vous choisissez l'option Calques en tableaux, Dreamweaver remplace tous les calques par un unique tableau qui conserve le positionnement original.

Les styles CSS sont replacés lorsque cela est possible par des balises HTML, telles que B et FONT. Tout code CSS qui ne peut pas être converti en HTML est supprimé. Voir Tableau de conversion de code CSS en HTML, page 183 pour obtenir des informations sur les styles qui sont convertis et ceux qui sont supprimés.

3 Cliquez sur OK. Dreamweaver ouvre le fichier converti dans une nouvelle fenetre sans titre.

Remarque: Vous doivent exécurrer cette procédure de conversion en fichier compatible avec un navigateur 3.0 chaque fois que vous modifie le fichier original, afin demettre à jour le fichier compatible 3.0. C'est la raison pour laquelle nous vous recommendons de n'utiliser cette procédure que lorsque vous étés tout à fait satisfait de votre fichier original.

Tableau de conversion de code CSS en HTML

Les attributs CSS listed dans le tableau suivant sont convertis en code HTML avec l'option Compatible navigateur 3.0. Les attributs qui ne sont pas listed dans le tableau sont supprimés. Voir Conversion des styles CSS en code HTML, page 182.

Attribut CSS	Converti en
couleur	FONT COLOR
famille de police	FONT FACE
taille de police	FONT SIZE="[1-7]"
Style de police : oblique	I
Style de police : italieque	I
épaissur de la police	B
type de style de liste : carré	UL TYPE="carré"
type de style de liste : cercle	UL TYPE="cercle"
type de style de liste : disque	UL TYPE="disque"
type de style de liste : roman supérieur	UL TYPE="i"
type de style de liste : roman inférieur	OL TYPE="i"
type de style de liste : alpha supérieur	OL TYPE="A"
type de style de liste : alpha inférieur	OL TYPE="a"
style de liste	UL ou OL avec TYPE approprié
alignement du texte	P ALIGN ou DIV ALIGN selon le cas
décoration du texte : souligné	U
décoration du texte : barré	STRIKE

Vérification de l'orthographe

Utilisez la commande Orthographe du menu Texte pour vérifier l'orthographe dans le document courant. La commande Orthographe ignore les balises et les valeurs d'attribut HTML.

Par défaut, le vérificateur d'orthographe utilise le dictionnaire de l'anglais US. Pour changer de dictionnaire, choisissez Édition > Préférences > Général et Sélectionné un autre dictionnaire à partir du menu contextual. Les dictionnaires des autres langues peuvent être téléchargés à partir du Centre de développement de Dreamweaver.

Boîte de dialogue Orthographe

Utilisez les commandes Texte > Orthographie suivantes, pour vérifier l'orthographé de votre document :

Ajouter à Personnel Ajoute le mot non reconnu à votre dictionnaire personnel. Pour supprimer des mots de ce dictionnaire, modifiez le fjichier Personal.dat dans un éditeur de texte.

Ignore Ignore cette occurrence du mot non reconnu.

Ignore tout Ignore toutes les occurrences du mot non reconnu.

Remplacer Remplace cette occurrence du mot non reconnu par le texte que vous entrez dans la zone Remplacer par ou par la seLECTION que vous effectuez dans la liste de suggestions.

Remplacer tout Remplacer toutes les occurrences du mot non reconnu.

CHAPITRE 10

Insertion d'images

Insertion d'images – Vue d'ensemble

Dreamweaver, comme la plupart des navigateurs, peut afficher les images JPEG et GIF. Dreamweaver, Microsoft Internet Explorer 4.0 et plus recent, ainsi que Netscape Navigator 4.04 et plus recent prennett également en charge les images PNG.

En général, JPEG est le format optimum pour les images photographiques ou à ions continus, et GIF est préféable pour les images en demi-tons, ou celles qui ont une surface importante de couleurs en aplat. Le format PNG constitue un remplacement non breveté de GIF, incluant la prise en charge des images en niveaux de gris, de couleurs indexées ou de couleur réelle. Ce format prend également en charge le canal alpha pour la transparence. PNG est le format de fichier natif de Macromedia Fireworks.

Pour utiliser une image comme arrêtre-plan d'une page, spécifie-la comme une propriété de page. Voir Définition d'une image d'arrêtre-plan ou d'une couleur de page, page 87. Pour que les images se superposent, insérez-les dans des calques. Voir Utilisation des calques - Vue d'ensemble, page 213.

Insertion d'une image

Pour que les images apparaissent dans un document de Dreamweaver, les fischiers d'images doivent se trouver à l'intérieur d'un site local défini. Si vous désissez un fjchier externe, Dreamweaver vous demandera si vous voulez que le fjchier soit copie dans un dossier à l'intérieur du site local. Voir Création d'un site local, page 106.

Si vous spécifie un chemin d'accès à un fjichier source extérieur au dossier racine local, Dreamweaver affichera un espace réservé pour l'image.

Pour insérer une image :

1 Effectuez l'une des opérations suivantes :

• Placez le curseur là où vous voulez que l'image apparaisse sur la page, puis besoinsez Insertion > Image, ou cliquez sur le bouton Insérer une image dans le volet Commun de la palette Objet.
• Faites glisser le bouton Image de la palette d'objets vers l'emplacement désiré sur la page.
• Faites glisser une image à partir du bureau vers l'emplacement désiré sur la page, puis passez à l' étape n° 3.
  2 Dans la boîte de dialogue qui apparaît, tapez le chemin d'accès au fichier source, ou cliquez sur Parcourir pour désir un fichier.

Voir A propos des chemins relatifs et absolus, page 114 pour plus de détails sur la Specification des noms de chemin.

Pour que cette boîte de dialogue n'apparaisse pas, désactiver l'options Afficher la boîte de dialogue lors de l'insertion d'objets dans les préférences générées.

Remarque: Un contenu lié à un chemin relatif à la racine du site n'apparaît pas lorsque vous affichez les fichiers locaux dans un navigateur, car les navigateurs ne sont pas charges de reconnaître les racines du site - c'est la responsabilité des serveurs. Si un contenu lié à des chemins relatifs à la racine, placez le fjichier sur un serveur distant pour afficher la page dans un navigateur. Voir aussi À propos des chemins relatifs et absolutus, page 114.

3 Définissez les propriétés des images dans l'inspecteur des propriétés.

Voir Configuration des propriétés d'image, page 188.

Creation d'un effet de survol

Un effet de survol est une image qui change lorsque le CURSEUR SE DEPLACE au-dessus d'elle. Un effet de survol est constitué de deux images : l'image principale (elle affichée lorsque la page se charge) et l'image de survol (elle qui apparait lorsque le CURSEUR SE DEPLACE au-dessus de l'image principale).

Pour plus de détails sur le changement d'une image en réponse à un événement différent (par exemple, un cli c de souris) ou sur l' apparition d'une image différente lorsque le curseur se déplace au-dessus de l'image, voir Interversion d'une image, page 281.

Pour creer un effet de survol:

1 Placez le curseur dans la fenetre Document, la où vous souhaitez que l'effect de survol apparaisse.
2 Effectuez l'une des opérations suivantes :

• Choisissez Fenêtre > Objects pour ouvrir la palette Object et cliquez sur le bouton Survol.
• Choisissez Insertion > Survol.

3 Dans la boîte de dialogue qui apparaît, entrez les informations suivantes :

• Tapez le chemin et le nom de fichier de l'image originale dans le champ Image originale, ou recherche et seLECTIONnez une image.
  Tapez le chemin et le nom de fichier de l'image de zone sensible dans le champ Image de survol, ou recherchez et selectionnez une image.
  Pour creer un lien, remplacez le signe # du champ Lien par un chemin et un nom de fichier, ou recherchez et selectionnez un fichier.
  Pour que Dreamweaver effectue le préchargement des images dans la mémoire cache du navigateur, Sélectionné l'option Précharger les images.
  4 Cliquez sur OK.

Pour tester un effet de survol :

1 Choisissez Fichier > Apercu dans le navigateur.
2 Dans le navigateur, déplacez le curseur au-dessus de l'image principale. L'image principale devrait être remplaçaé par l'image de survol.

Configuration des propriétés d'image

Lorsqu'une image est selectionnée, faites votrechoix à partir des propriétés suivantes,dans l'inspecteur des propriétés.

Ce dernier affiche les propriétés les plus souvent utilisées. Cliquez sur la flèche d'agrandissement dans le coin inférieur droit pour afficher toutes les propriétés.

Image Vous permet de nommer l'image de façon à pouvoir y faire référence avec un langage de script, tel que JavaScript ou VBScript.

Let H réservent l'espace de l'image sur la page, pendant le chargement de la page. Dreamweaver entre automatiquement la taille originale de l'image. Les valeurs par défaut et sans précision d'unité sont en pixels. Vous pouvez également entra un nombre et "in" pour pouces, "pc" pour picas, "pt" pour points, "mm" pour millimétres, "cm" pour centimétres et des combinaisons, telles que 2in+5mm. Dreamweaver convertit les valeurs en pixels dans le code HTML source. Changer les valeurs redimensionné la taille d'affichage de l'image selon le cas. Les valeurs modifiées apparaissent en gras. Pour rétabrir les valeurs originales, cliquez sur les étiquettes des champs. Modifier la largeur et la hauteur ne réduit pas le temps du téléchargement, car le navigateur télécharge toutes les données d'image avant demettre l'image à l'échelle. Pour réduire le temps de téléchargement et pour s'assurer qu'une image apparait dans tous les cas à la même taille, utilisez une application de retouche d'image afin demettre les images à l'échelle.

Src Spécifique le fjichier source de l'image. Tapez le chemin d'accès ou cliquez sur l'icone du dossier pour trouver le fjichier source et le selectionner. Voir A propos des chemins relatifs et absolus, page 114 pour plus de détails sur la saisie des noms de chemin.

Lien Spécifique un hyperlien pour l'image. Tapez l'URL, faites glisser l'icone pointeuse de filchier vers un filchier de la fenêtre du site, ou cliquez sur l'icone de dossier pour rechercher et sélectionner un document de votre site.

Aligner Aligne l'image et le texte sur la même ligne. Voir Alignment des éléments, page 190.

Sec. Spécifie du texte secondaire apparaissant à la place de l'image pour les navigateurs de type texte seulement ou pour les navigateurs qui sont définis de façon à télécharger les images manuellement. Pour les utilisateurs ayant un problème de vue et qui ont recours à un synthétiseur vocal avec les navigateurs basés-texte uniquement, le texte est prononcé. Dans certains navigateurs, ce texte apparait également lorsque le pointeur se trouve sur l'image.

Espace V et Espace H Ajoutent de l'espace en pixels, respectivement en haut et en bas, et à gauche et à droite de l'image.

Cible Spécifie la fenêtre ou le cadre dans lequel la page liée devrait être chargée. (Cette option n'est pas disponible s'il n'y a pas de lien sur l'image). Tous les noms de cadres du document courant apparaissent dans la liste. Si le cadre spécifique n'este pas lorsque le document courant est ouvert dans un navigateur, la page liée se charge dans une nouvelle fenêtre portant le nom que vous avez spécifique. Une fois que cette fenêtre existe, d'autres fichiers peuvent etre diriges vers elle. Vous pouvez également désirar à partir des noms de cible réservés suivants :

blank charge le fichier lie dans une nouvelle fenetre de navigateur qui n'est pas nommée.
_parent charge le fichier lié dans le jeu de cadres parent ou dans la fenêtre parente du cadre contenant le lien. Si le cadre contenant le lien n'est pas imbriqué, le fichier lié sera chargé dans la fenêtre navigateur en plein écran.
_self charge le fichier lie dans le même cadre ou la même fenetre que le lien.
Cette cible étant implicite, il n'est généralement pas nécessaire de la spécifier.
top charge le fichier lie dans la fenetre navigateur en plein écran, supprimant ainsi tous les cadres.

Src faible Spécifie l'image qui doit être chargeée avant l'image principale. De nombreux concepteurs utilisent la version 2 bits (noir et blanc) de l'image principale car elle est chargeée rapidement et donne aux visiteurs une idée de ce qui va leur êtreprésenté; vous pouvez toute fois utiliser n'importe chaque image avec les mêmes dimensions que l'image principale.

Bordure Définit la largeur en pixels de la bordure qui encadre l'image. Entrez 0 pour aucune bordure.

Carte Vous permet de creer des cartes graphiques cote client. Voir Creation de cartes graphiques, page 193.

Actualiser Réinitialise les valeurs L et H à la taille originale de l'image.

Éditer Lance l'éditeur d'image que vous avez spécifique dans les préférences d'éditeurs externes, et ouvre l'image sélectionnée. Lorsque vous enregistrez votre fichier d'image et que vous returnez dans Dreamweaver, ce dernier actualise la fenêtre Document avec l'image éditée. Voir Utilisation d'un éditeur d'image externe, page 192.

Alignment des éléments

Les options d'alignement suivantes de l'inspecteur de propriétés sont associées avec certains éléments sélectionnés, tels que des images ou des plug-ins.

Valeur par défaut Elle dépend du navigateur, mais généralement elle spécifie un alignement sur la ligne de base.

Ligne de base et Bas Aligne la ligne de base du texte avec le bas de l'objet.

Bas absolut Le bas absolut du texte, y compris les descendantes ( comme dans la dette "g"), avec le bas de l'objet.

Haut Aligné le haut du caractère le plus haut de la ligne de texte avec le haut de l'objet.

Haut du texte Aligne le caractère le plus haut de la ligne de texte avec le haut de l'objet.

Milieu Aligne la ligne de base du texte avec le milieu de l'objet.

Milieu absolut Le milieu du texte avec le milieu de l'objet.

Aligner à gauche Aligne l'objet sur la marge de gauche et place le texte qui l'entoure à sa droite. Si le texte ajusté à gauche precedé l'objet sur la ligne, les objets alignés à gauche sont généralement placés automatiquement sur une nouvelle ligne. Tout texte à la suite de l'objet sur la ligne revient automatiquement à la ligne précédente, apparaissant ainsi au-dessus de l'objet.

Aligner à droite Aligne l'objet sur la marge de droite et place le texte qui l'entoure à sa gauche. Si le texte justifié à droite précède l'objet sur la ligne, les objets alignés à droite sont généralement places automatiquement sur une nouvelle ligne. Tout texte à la suite de l'objet sur la ligne revient automatiquement à la ligne précédente, apparaisant ainsi au-dessus de l'objet.

Redimensionnement des images et d'autres éléments

Dans la fenêtre Document de Dreamweaver, vous pouvez redimensionner visuellement les éléments, tels que les images, les plug-ins, les animations Shockwave ou Flash, les appliquettes et les contrôle d'ActiveX. Redimensionner visuellement vous aide à déterminer dans qu'elle mesure un élément affecte la mise en page selon sa taille.

Le fait de redimensionner affecte les attributs WIDTH et HEIGHT de l'objet. La taille du fichier de l'objet ne change pas.

Les animations Flash et les autres éléments basés vecteur peuvent être redimensionnés, ce qui n'affecte en rien leur qualité.

Les éléments Bitmap tels que les images GIF, JPEG et PNG peuvent prendre un aspect grossier ou être déformés si vous réinitialisez leurs attributs WIDTH et HEIGHT. Il est recommendé de ne redimensionner ces éléments visuellement dans Dreamweaver que pour déterminer la mise en page. Lorsque vous avez déterminé la taille ideale de votre image, éditez le fjichier dans une application d'edition d'image. L'édition de l'image pourrait aussi diminuer sa taille de fjichier et par conséquent, réduire son temps de téléchargement.

Pour redimensionner un élément :

1 Sélectionnez l'objet (par exemple, une image ou une animation Shockwave) dans la fenêtre Document.

Des poignées de redimensionnement apparaissent à droite et en bas de l'objet, et dans le coin inférieur droit. Si aucune poignée n'apparait, d'autres éléments sont sélectionnés en plus de l'objet que vous pouze redimensionner. Cliquez en dehors de l'objet et sélectionnez-le à nouveau, ou utilisez le sélection de balise en bas de la fenêtre Document pour sélectionner l'objet.

2 Redimensionner l'objet :

• Faites glisser la poignée à droite de la scélection pour ajuster la largeur de l'élément.
• Faites glisser la poignée au bas de la seLECTION pour ajuster la hauteur de l'élément.
• Faites glisser la poignée au coin de la seLECTION pour ajuster en même temps la largeur et la hauteur de l'élément.
• Faites glisser la poignée au coin de la seLECTION tout en appuyant sur Maj, afin de préserver les proportions de l'élement (rapport largeur:hauteur) alors que vous ajustez ses dimensions.

Les éléments peuvent être redimensionnés visuèlement à une taillie minimum de 6 pixels par 6 pixels. Pour ajuster la largeur et la hauteur d'un élément à une taillie inférieure, (par exemple, 1 pixel par 1 pixel), utilisez l'inspecteur des propriétés.

Pour ramener l'objet à ses dimensions originales, cliquez sur les mentions L et H dans l'inspecteur des propriétés.

Utilisation d'un主编 d'image externe

Voupe ouvir une image selectionnee dans un editor d'image externe directement a partir de Dreamweaver. Lorsque vous revenez dans Dreamweaver après avoir enregistré le fjchier de l'imagre, toutes les modifications de l'imagre sont visibles dans la fenetre Document.

Pour désirer un éditeur d'image externe :

1 Choisissez Édition > Préférences.
2 Sélectionnez Éditeurs externes à partir de la liste des catégories qui se trouvè à gauche.
3 Cliquez sur Parcourir a cote de la zone Images et selectionnez votre éditeur d'image préféRED.

Si vous choisissez Macromedia Fireworks comme éditeur d'image externe et que vous le lancez à partir de Dreamweaver, Fireworks recherche automatiquement dans le dossier contenant le fjichier sélectionné, un fjichier PNG du même nom. Par exemple, si vous scélectionné une image dont le fjichier source est images/maPhoto.gif et que images/ contient également un fjichier nommé maPhoto.png, Fireworks ouvre le fjichier PNG. Les fjichiers PNG étant le format initial de Fireworks, ils conservent toutes les informations sur les calques, les vecteurs, les couleurs et les effets, et tous les éléments peuvent à tout moment être entièrement modifiés. Les fjichiers doivent avoir l'extension .png pour être reconnus comme fjichiers PNG par Dreamweaver.

Si vous choisissez une autre application comme éditeur d'image externe et que vous la lancez à partir de Dreamweaver, l'application ouvre l'image sélectionnée (par exemple, images/maPhoto.gif). Si vous préférez, vous pouvez ouvoir manuellement le fjichier original à partir duquel le GIF a été généré, (par exemple, maPhoto.psd pourrait être le fjichier Photoshop original), effectuer les modifications et générer à nouveau l'image GIF. Lorsque vous returnez dans Dreamweaver l'image est actualisée dans la fenêtre Document.

Pour lancer l'éditeur d'image externe, effectuez l'une des procédures suivantes :

Tout en maintainant le bouton Contrôle (Windows) ou Commande (Macintosh) appuyé, double-cliquez sur l'image que vous pouvez éditer.
- Cliquez avec le bouton droit de la souris (Windows) ou appuyez sur Contrôle tout en cliquant (Macintosh) sur l'image que vous poulez éditer et désissez Éditer image à partir du menu de raccourci.
- Sélectionnez l'image que vous voulez éditer et cliquez sur Éditer image dans l'inspecteur des propriétés.

Creation de cartes graphiques

Une carte graphique est une image unique à laquelle sont affectés différents hyperliens, pour définir les régions de l'image. Utilisez l'éditeur de carte graphique pour creer et éoperator graphiquement des cartes graphiques côte client.

Les cartes graphiques côté client conservent les informations d'hyperlien dans le document HTML, mais pas dans un fjichier carte séparé, contrairement aux cartes graphiques côté serveur. Lorsque l'utilisateur clique sur la zone sensible d'une image, l'URL associée est envoyée directement sur le serveur. Ceci rend les cartes graphiques côté client plus rapides que celles côté serveur, car le serveur n'a pas besoin d'interpréter où l'utilisateur a cliué. Les cartes graphiques côté client sont prises en charge par Netscape Navigator 2.0 et plus récent, NCSA Mosaic 2.1 et 3.0, ainsi que toutes les versions de Microsoft Internet Explorer.

Dreamweaver ne modifie pas les références aux cartes graphiques côté serveur dans les documents existants. Vous pouvez utiliser dans un même document, les cartes graphiques côté client et celles côté serveur. Les navigateurs qui prennten en charge les deux types de cartes graphiques donnent la priorite à celles côté client. Pour qu'une carte graphique côté serveur soit incluse dans un document, vous devez écrire le code HTML correspondant.

Pour creer une carte graphique:

1 Sélectionnez l'image et cliquez sur le bouton Carte dans l'inspecteur de propriétés.

Pour voir le bouton Carte, vous devrez peut-être cliquer sur la flèche d'agrandissement dans le coin inférieur droit de l'inspecteur de propriétés.

2 Tapez le nom de la carte dans le champ approprié.

Ce nom apparait comme l'attribut NAME de la balise MAP et comme l'attribut USEMAP de la balise IMG.

3 Sélectionnez l'outil cercle ou carré et faites-le glisser au-dessus de l'image pour créé une zone sensible de la forme d'un cercle ou d'un carré, ou selectionnez l'outil de polygone et définissez une zone sensible de forme irrégulière en cliquant une fois pour chaque coin et deux fois pour fermer la forme.

4 Tapez le chemin de l'URL de la zone sensible dans la boîte Lien, ou cliquez sur l'icone de dossier pour rechercher et seLECTIONner un fjichier.

5 Afin de faire apparaitre le document lié ailleurs que dans la fenêtre ou le cadre actif, entrez un nom de fenêtre dans la boîte Cible, ou désissez un nom de cadre à partir du menu contextual.

Voir Creation de liens, page 107.

6 Dans le champ secondaire, tapez le texte de remplacement qui est affiché pour la zone sensible dans les navigateurs ne traitant que du texte.

Certains navigateurs affichent ce texte comme une info-bulle lorsque l'utilisateur place la souris au-dessus de la zone sensible.

7 Répétez les étapes 3 à 6 jusqu'à ce que vous ayez définit toutes les zones sensibles, puis cliquez sur OK.

CHAPITRE 11

Déception de tableaux

Création de tableaux – Vue d'ensemble

Les tableaux sont utilisés pour partager des données. Ils peuvent également être utilisés pour contröler l'endetroit où le texte et les éléments graphiques apparaissent sur la page. Lorsque vous creez un tableau, vous pouvez ajouter du contenu, modifier des cellules et des propriétés de lignes, de même que copier et coller plusieurs cellules.

Vouv pouvez également opérer des conversions entre tableaux et calques. Les tableaux et les calques vous permettent de-disposer des éléments de page. Toutefois,les calques ne sont pas pris en charge par les navigateurs de version 3.0 ou antérieure.Si le processus de conception requiert un repositionnement rapide du contenu, vous pouvez utiliser des calques pouraccomplir cette tâche,puis convertir les calques en tableaux affichables dans des navigateurs plus ancients.Voir Utilisation des calques pour conceivevoir des tableaux,page 226.

Déciation de tableaux

Utilisez la palette d'objets ou le menu Insertion pour creer un nouveau tableau.

Pour insérer un tableau :

1 Procedez de l'une des manieres suivantes :

• Pointez le curseur là où vous voulez que le tableau s'affiche sur la page, puis cliquez sur le bouton Tableau du volet Commun de la palette d'objets ou sur Insertion > Tableau.
• Faites glisser le bouton Tableau de la palette d'objets vers l'emplacement de la page souhaité.
  2 Dans la boîte de dialogue qui s'affiche, entrez les informations suivantes :

Lignes et colonnes déterminant le nombre de lignes et de colonnes du tableau.

Remplissage de cellule détermine l'espace qu'il doit y avoir entre le contenu d'une cellule et son contour.

Espacement des cellules détermine l'espacement qu'il doit y avoir entre chaque cellule d'un tableau, sans compter la cordure.

Largeur déterminé la largeur du tableau exprimée en pixels ou comme pourcentage de la fenêtre du navigateur. La définition des tableaux en pixels favorise une disposition précise du texte et des images, tandis que la définition en pourcentage est une option valable lorsque les proportions des colonnes entre elles sont plus importantes que leur largeur réelle.

Bordure déterminé la largeur de bordure du tableau.

Remarque: Si vous pouze insérer un tableau sans avoir à paramétre ces options, désactive l'option Afficher la boîte de dialogue lors de l'insertion d'objects dans les préférences générales. Voir Paramétrage des préférences, page 72.

Imbrication de tableaux

Un tableau imbriqué est un tableau inséré dans une cellule d'un autre tableau. Vous pouvez configurer un tableau imbriqué comme n'importe quel autre tableau. Toutefois, sa largeur est limite par la largeur de la cellule dans laquelle il se trouve.

Pour imbriquer un tableau à l'intérieur d'une cellule de tableau :

1 Procedez de l'une des manieres suivantes :
- Cliquez sur la cellule où vous poulez que le second tableau apparaisse, puis besoinissez Insertion > Tableau.
- Cliquez sur la cellule où vous pouze que le second tableau apparaisse, puis cliquez sur le bouton Tableau du volet Commun de la palette d'objects.
- Faites glisser le bouton Tableau du volet Commun de la palette d'objets vers la cellule dans laquelle le second tableau doit être inséré.
2 Dans la boite de dialogue qui s'affiche, spécifie les propriétés du tableau, puis cliquez sur OK.

Remplissage d'un tableau

Tapez directement dans les cellules du tableau ou collez-y du texte. Vous pouvez contrôler les propriétés des éléments graphiques insérés dans un tableau exactement comme celles de n'importe quel autre élément graphique. Voir Configuration des propriétés d'image, page 188.

Pour ajouter du texte à un tableau :

1 Cliquez sur n'importe qu'elle cellule, puis procedede l'une des manieres suivantes:
- Commencez à taper pour entrer du texte dans le tableau. Les cellules du tableau s'étirrent à mesure que vous tapez.
Collez du texte copié de Dreamweaver ou de n'importe quel autre éditeur de texte. Utilisez la commande Coller comme texte pour préserver les paragraphs. Voir Ajout de texte et insertion d'objets, page 82.
2 Appuyez sur la touche de tabulation pour passer à la cellule suivante ou appuyez sur MAJ+TAB pour passer à la cellule précédente. Le fait d'appuyer sur TAB lorsque le curseur se trouve dans la dernière cellule d'un tableau ajoute automatiquement une ligne.

Voussoupiezegalementutiliserles touchesfléchées pourpasserd'unecellulea l'autre.

Pourajouterungraphiqueaun tableau:

1 Cliquez sur la cellule où vous voulez que le graphique apparaisse.
2 Cliquez sur le bouton Insertion d'image du volet Commun de la palette d'objects ouCHOisissez Insertion > Image.
3 Dans la boîte de dialogue qui s'affiche, choisissez un fichier d'image.

Sélection d'éléments de tableau

D'un simple geste, vous pouvez selectionner un tableau tout entier, une ligne ou une colonne, voir une plage de cellules contiguës à l'intérieur du tableau. Une fois le tableau selectionné, en tout ou partie, vous pouvez :

modifier l'aspect des cellules selectionnées ou du texte qu'elles contiennent. Voir Formatage de tableaux, page 200;
copier et coller des plages de cellules contiguës. Voir Copie et collage de cellules, page 210.

Vou puez également sélectionner plusieurs cellules non contigués dans un tableau et en modifier les propriétés. Il est en revanche impossible de copier et coller des sélections de cellules non contigués.

Pour selectionner le tableau tout entier, procedede l'une des manieres suivantes:

• Cliquez sur le coin supérieur gauche du tableau ou n'importe où sur le bordroit ou inférieur.
• Cliquez une fois dans le tableau, puis désisissez Modifier > Tableau > Sélectionner le tableau.
  Cliquez une fois dans le tableau, puis choisissez Edition > Selectionner tout.
• Positionné le curseur n'importe où dans le tableau, puis seLECTIONné la balise dans le coin inférieur gauche de la fenêtre Document.

  Des poignées de selection apparaissent autour du tableau lorsqu'il est seLECTIONné.

  

  Pour sélectionner des lignes ou des colonnes, procédez de l'une des manières suivantes :

  Positionnéz le curseur sur la marge gauche d'une ligne ou en haut d'une colonne. Cliquez lorsque la flèche de seLECTION s'affiche.

  

  • Cliquez sur une cellule et faites glisser le curseur de la souris, verticalement ou horizontally, sans relâcher le bouton, de manière à selectionner plusieurs lignes ou colonnes.

  Pour sélectionner une ou plusieurs cellules, procédez de l'une des manières suivantes :

  • Cliquez sur une cellule et faites glisser le curseur de la souris, verticalement ou horizontally, sans relâcher le bouton, vers une autre cellule.
  • Cliquez sur une cellule, puis en tenant la touche MAJ enforcée, cliquez sur une autre cellule. Toutes les cellules se trouvant à l'intérieur de la zone rectangulaire ainsi déliminée sont sélectionnées.

  

  Pour selectionner plusieurs cellules non contiguës, procedez de l'une des manières suivantes :

  Enforcez la touche CTRL (Windows) ou sur Commande (Macintosh), puis cliquez dans le tableau pour ajouter des cellules, des lignes ou des colonnes à la seLECTION.
  - Sélectionnez plusieurs cellules dans le tableau, puis, en tenant enforcée la touche CTRL (Windows) ou Commande (Macintosh), cliquez sur les cellules, lignes ou colonnes que vous pouze déslectionner.

  Formatage de tableaux

  Vous pouvez modifier l'aspect des tableaux en définissant des propriétés pour l'ensemble ou une partie de leurs cellules ou en leur appliquant une mise en forme prédéfinie. Voir Paramétrage des propriétés de tableaux, page 201, Paramétrage des propriétés de ligne et de cellule, page 202 et Formatage d'un tableau à l'aide d'une mise en forme prédéfinie, page 204.

  Pour formater du texte dans des tableaux, vous pouvez appliquer une mise en forme à du texte sélectionné ou utiliser des styles. Voir Formatage du texte – Vue d'ensemble, page 167.

  A propos des balises de tableaux

  Lorsque vous formatez des tableaux dans la fenêtre du document, vous pouvez définir des propriétés s'appliquant au tableau tout entier ou à une série de lignes, de colonne ou de cellules sélectionnées dans le tableau. Lorsqu'une propriété telle qu'une couleur d'arrière-plan ou un alignement, est définié d'une certaine manière pour l'ensemble du tableau et d'une autre pour certaines cellules individuelles, il est utile de comprendre comment le langage HTML est interprétré.

  Lorsque la même propriété est définie plus d'une fois dans un tableau, elle est interprétable comme suit : le formatage de cellule, qui fait partie de la balise TD, a priorité sur le formatage de ligne de tableau (balise TR) qui, à son tour, a priorité sur le formatage du tableau (balise TABLE). C'est pourquoit, si vous définiquee la couleur bleue pour l'arrière-plan d'une cellule, puis définiquee la couleur jaune pour l'arrière-plan du tableau, la couleur de la cellule bleu ne change pas du fait que la balise TD a priorité sur la balise TABLE.

  Dans l'exemple ci-dessous, la balise TABLE définit la couleur d'arrière-plan jaune (#FFFF99) pour tout le tableau. La première balise TR change la couleur des cellules en vert (#33FF66), et la seconde balise TD change la cellule centrale du haut en bleu (#333399). Les balises TR et TD dans la ligne du bas n'ont pas été modifiées de sorte que ces cellules adoptent la couleur du tableau, à savoir le jaune.

  Paramétrage des propriétés de tableaux

  L'inspecteur de propriétés affiche les propriétés d'un tableau lorsqu'il est sélectionné.

  Vous pouvez également utiliser la commande Format tableau pour appliquerrapidement une mise en forme predéfinie à un tableau seLECTIONné. Voir Formataged'un tableau à l'aide d'une mise en forme prédéfinie, page 204.

  Pour spécifique les propriétés d'un tableau :

  1 Sélectionnéz le tableau.
  2 Choisissez Fenetre > Propriétés pour ouvrir l'inspecteur de propriétés. Cliquez sur la flèche d'agrandissement dans le coin inférieur droit pour afficher toutes les propriétés.
  3 Pour nommer le tableau, tapez son nom dans le champ Nom du tableau.
  4 Opérez une série parmi les options de mise en forme du tableau suivantes : Les champs Lignes et Cols définitivement le nombre de lignes et de colonnes du tableau.

  L et H définissant la largeur et la hauteur du tableau, exprimées en pourcentage de la fenêtre du navigateur, ou par une valeur absolue en pixels. Il est rare que l'on fixe la hauteur d'un tableau.

  Aligner aligne le tableau sur la gauche (paramétrage par défaut), la droite ou le centre de la fenêtre des navigateurs de version 4.0 ou ultérieurs. Pour centrer un tableau dans les navigateurs version 3.0, Sélectionnez-le, puis désisissez Texte > Alignment > Centrer.

  Espace V et Espace H spécifique l'espace (exprime en pixels) qu'il faut réserver en haut, en bas, à gauche et à droite du tableau.

  Les boutons Effacer hauteurs de ligne et Effacer largeurs de colonne suppliment toutes les valeurs de hauteur de ligne et de largeur de colonne du tableau.

  Le bouton Convertir largeur de tableau en pixels convertit la largeur du tableau exprimée en pourcentage de la fenetre du navigateur en sa valeur absolue actuelle exprimée en pixels. Cliquez sur le bouton Convertir largeurs de tableau en pourcentage pour obtaining l'effect inverse, a savoir pour convertir la valeur absolue exprimée en pixels en pourcentage de la fenetre du navigateur.

  5 Opérez une série parmi les options de mise en forme de cellule suivantes : Espac. de cellule définit l'espace devant séparer les cellules du tableau.

  Remplissage définit l'espace qu'il doit y avoir entre le contenu d'une cellule et son contour. Si aucune valeur spécifique n'est attribuée aux paramètres d'espacement et de remplissage des cellules, Netscape Navigator, Microsoft Internet Explorer et Dreamweaver affichent tous trois le tableau comme si la valeur d'espacement était définie sur 2 et la valeur de remplissage sur 1.

  6 Définissez les options suivantes pour la mise en forme des cordures :

  Bordure permet de définir la largeur de la cordure entourant le tableau, exprimée en pixels. La plupart des navigateurs affichent la cordure sous la forme d'une ligne en relief. Si vous utilisez le tableau pour la mise en page, spécifiez une valeur de cordure égale à 0. Pour afficher les contours de cellule et de tableau lorsque la valeur de cordure est fixée à 0,CHOISSEZ AFFICHAGE > Bordures de tableau.

  Les deux champs libellés Brdre permettent de définir les couleurs des cordures auxquelles est appliqué un effet de surbrillance et d'ombre pour obtenir un aspect tridimensionnel (pour revenir aux nuances de gris par défaut, supprimez les valeurs de couleur et laissez les,champs à blanc).

  Le champ Brdr en bas à droite permet de définir la couleur de cordure pour tout le tableau.

  7 Les options Ar-pl permettent de définir respectivement l'image et la couleur d'arrière-plan pour le tableau.

  Paramétrage des propriétés de ligne et de cellule

  Sélectionnez n'importe qu'elle combinaison de cellules, puis utilisez l'inspecteur de propriétés pour modifier individuellement l'aspect des cellules, des lignes et des colonnes. Pour sélectionner des cellules, des lignes et des colonnes, voir Sélection d'éléments de tableau, page 198. Pour appliquer un formatage au tableau tout entier, voir Paramétrage des propriétés de tableaux, page 201.

  Pour formater une ligne, une colonne ou une cellule :

  1 Sélectionnez une combinaison quelconque de cellules dans le tableau.

  2 Choisissez Fenêtre > Propriétés pour ouvrir l'inspecteur de propriétés, puis cliquez sur la flèche d'extension dans le coin inférieur droit pour afficher toutes les propriétés.

  3 Sélectionnez l'une des options d'aspect suivantes :

  • Horz définit l'alignement horizontal du contenu de la cellule sur le paramétrage par défaut du navigateur (habituellement à gauche pour les cellules ordinaires et centré pour les cellules de titre), à gauche, à droite ou centré.
  • Vert définit l'alignment vertical du contenu de la cellule sur le paramétrage par défaut du navigateur (habituellement au milieu), en haut, au milieu, en bas ou sur la ligne du bas.
    L et H définitent la largeur et la hauteur des cellules selectionnées, exprimées en pixels. Pour utiliser des pourcentages, suivez la valeur associée au signe (%).
    Le champ Ar-pl du haut définit l'image d'arrière-plan pour les cellules.
    Le champ Ar-pl du bas définit la couleur d'arrière-plan pour les cellules. La couleur d'arrière-plan apparait uniquement à l'intérieur des cellules, c'est-à-dire qu'elle n'affecte pas les espacements entre les cellules ni les cordures du tableau. Cela signifie que si l'espacement et le replissage des cellules ne sont pas paramétrés sur 0, il y aura des trous entre les zones colorées, même si la cordure est paramétrée sur 0.
  • Brdre définit la couleur de bordure des cellules.
    4 Opérez une série parmi les options de mise en forme suivantes :
    Fusionner ou Fractionner combine ou divise des cellules. Voir Fractionnement et fusion de cellules, page 208.
  • Pas de return à la ligne auto empêche le return à la ligne des mots de sorte que les cellules s'étirent en largeur pour pouvoir accueillir toutes les données. Normalement, les cellules s'élargissant horizontallyment pour pouvoir accueillir le mot le plus long, puis s'étrent verticalement.
    Titre formate chaque cellule comme un titre de tableau. Par défaut, le contenu des cellules de titre de tableau (TH) est en caractères gras et centré.

  Formatage d'un tableau à l'aide d'une mise en forme prédéfinie

  Utilisez la commande Formater le tableau pour appliquer rapidement une mise en forme prédéfinie à un tableau, puis Sélectionnez des options pour personnelier davantage la mise en forme.

  Pour utiliser une mise en forme prédéfinie :

  1 Sélectionnez le tableau et choisissez Commandes > Formater le tableau.
  2 Dans la boîte de dialogue qui s'affiche, Sélectionnez un modèle de mise en forme dans la liste à gauche. Le tableau est mis à jour, illustrant l'aspect de la mise en forme.
  3 Pour personnelier davantage la mise en forme, modifier les options Couleurs de ligne, Ligne supérieure et Col. gauche.
  4 Pour modifier la largeur de bordure, tapez une valeur dans le champ Bordure. Tapez 0 si vous ne poulez pas de bordure.
  5 Pour appliquer la mise en forme aux cellules du tableau (balises TD) McClot qu'aux lignes (balises TR), activez l'option Appliquer tous les attributs aux balises TD McClot que TR.

  Le formatage appliqué aux cellules du tableau a priorité sur celui appliqué aux lignes du tableau. En revanche, le formatage appliqué aux lignes produit un code source HTML plus propre et concis. Voir Formatage de tableaux, page 200.

  6 Cliquez sur Appliquer ou sur OK pour formater le tableau avec la mise en forme sélectionnée.

  Tri de tableaux

  Vou puez efectuer un simple tri de tableau en vous basant sur le contenu d'une seule colonne. Vous pouze également executer un tri de tableau plus compliqué en triant le contenu des deux colonnes.

  Vou ne pouvez pas trier des tableaux contenant des attributs COLSPAN ou ROWSPAN, c'est-à-dire des tableaux contenant des cellules fusionnées.

  Pour trier un tableau :

  1 Sélectionnez le tableau et choisissez Commandes > Trier le tableau.
  2 Dans la boîte de dialogue qui s'affiche, opérez un besoin parmi les options suivantes :
  Sélectionnez la colonne à trier à l'aide de l'options Trier par.
  - Sélectionnez le type de tri, alphabetique ou numérique, que vous pouze effectuer à l'aide de l'options Ordre.

  Cette option est importante lorsque le contenu d'une colonne est numérique. Un tri alphabétique appliqué à une liste de nombres d'un ou deux chiffres produit un tri alphanumeric (tel que 1, 10, 2, 20, 3, 30) au lieu de numérique (tel que 1, 2, 3, 10, 20, 30).

  • Sélectionnez Croissant (de A à Z ou de bas en haut) ou Décroissant pour l'ordre de tri.
    3 Pour appliquer un tri secondaire à une autre colonne, spécifiez les options de tri à l'aide du champ Puis par.
    4 Activez l'option Inclore la première ligne pour inclore la première ligne dans le tri. Si la première ligne est un titre qui ne doit pas etre déplaced, laissez cette option désactivée.
    5 Cliquez sur Appliquer ou sur OK pour trier le tableau.

  Redimensionnement des tableaux et cellules

  Vou puez redimensionner tout le tableau ou uniquement des cellules ou des colonnes individuelles. Lorsque vous redimensionnez tout le tableau, toutes les cellules changent en proportion.

  Pour redimensionner le tableau :

  1 Sélectionnéz le tableau.
  2 Faites glisser l'une des poignées de selection pour redimensionner le tableau dans cette dimension. La poignée d'angle permet de redimensionner les deux dimensions.

  Pour modifier la taille d'une ligne ou d'une colonne, précédez de l'une des manières suivantes :

  Pour modifier la hauteur de ligne, faites glisser la cordure inférieure de la ligne.
  Pour modifier la largeur de colonne, faites glisser la cordure droite de la colonne.

  Modification des largeurs de colonne

  L'inspecteur de propriétés vous permet de spécifique la largeur d'une colonne de trois manières.

  Pour définiir la largeur de colonne :

  1 Cliquez sur une cellule de la colonne ou selectionnez-la toute entiere.
  2 Choisissez Fenetre > Propriétés pour ouvrir l'inspecteur de propriétés.
  3 Dans le champ L, procedez de l'une des manieres suivantes:

  Tapez un nombre exprimant, en pixels, la largeur de colonne voulue.
  - Tapez un nombre suivi du signe de pourcentage (%) pour que la largeur de la colonne corresponde à un pourcentage de la largeur du tableau (les menus déroulants pixels/% ne s'affichent pas pour les cellules, les lignes et les colonnes; uniquement pour les tableaux entiers).
  Laissez le champ à blanc (paramétrage par défaut) pour laisser au navigateur et à Dreamweaver le sole de déterminer la largeur appropriée en fonction du contenu de la cellule et des largeurs des autres colonnes. Généralement, l'espace attribué se base sur la ligne la plus longue et l'image la plus large. C'est pourquoi il arrive qu'une colonne de tableau devienne beaucoup plus large que les autres lorsque vous y ajoutez du contenu.

  Effacement des largeurs de colonne et des hauteurs de ligne

  La maniere la plus simple de définir les largeurs de colonne et les hauteurs de ligne consiste à faire glisser les cordures du tableau. Le fait de faire glisser une bordure de colonne ou de ligne modifie automatiquement les valeurs spécifiques de toutes les colonnes et les lignes, exprimées soit en pixels, soit en pourcentage des dimensions actuelles du tableau, selon la maniere dont la largeur du tableau est spécifiée.

  Si vous n'obtenez pas le résultat souhaité en tirant sur les cordures du tableau, vous pouvez effacer les valeurs de largeur de colonne et recommencer.

  Pour modifier les largeurs et hauteurs de cellule, procédez de l'une des manières suivantes :

  • Sélectionnez le tableau,CHOISSEZ Modifier >Tableau,puis Effacer les hauteurs de cellule ou Effacer les largeurs de cellule.
  • Choisissez Fenêtre > HTML, puis modifie les largeurs et hauteurs directement dans l'inspecteur HTML.
  • Dans l'inspecteur de propriétés, tapez des valeurs de largeur et de hauteurs spécifiques dans les champs L et H.

  Ajout et retrait de lignes et de colonnes

  Utilisez les commandes du menu Modifier > Tableau ou celle du menu contextual pour ajouter ou-retirer des lignes et des colonnes de tableau.

  Pour ajouter des lignes ou des colonnes :

  1 Cliquez sur la cellule où vous voulez que la nouvelle ligne ou la nouvelle colonne apparaisse.
  2 Procedez de l'une des manieres suivantes:
  Pour ajouter une ligne,CHOISSEZ Modifier > Tableau > Inserer une ligne ou, dans le menu contextuel,Tableau > Inserer une ligne.
  Pour ajouter une colonne,CHOISSEZ Modifier > Tableau > Inserer une colonne ou,dans le menu contextuel,Tableau > Inserer une colonne.
  Pour ajouter des lignes et des colonnes,CHOISSEZ Modifier > Tableau > Inserer des lignes ou des colonnes ou, dans le menu contextuel, Tableau > Inserer des lignes ou des colonnes.

  Dans la boîte de dialogue qui s'affiche, tapez le nombre de lignes ou de colonnes que vous voulez ajouter. Sécífiez si les nouvelles lignes ou colonnes doivent s'afficher devant ou derrière la colonne ou la ligne sélectionnée. Cliquez sur OK.

  Pour supprimer une ligne ou une colonne :

  1 Cliquez sur une cellule de la ligne ou de la colonne que vous pouze supprimer.
  2 Sélectionnéz l'une des options suivantes :
  Pour supprimer une ligne,CHOISSEZ Modifier > Tableau > Supprimer la ligne ou,dans le menu contextual,Tableau > Supprimer la ligne.
  Pour supprimer une colonne,CHOISISEZ Modifier > Tableau > Supprimer la colonne ou,dans le menu contextual,Tableau > Supprimer la colonne.

  Pour ajouter ou supprimer des lignes ou des colonnes au bas et à droite d'un tableau :

  1 Sélectionnez tout le tableau (cliquez sur le coin supérieur gauche du tableau ou cliquez une fois dans le tableau, puis Modifier > Tableau > Sélectionner le tableau).
  2 Dans l'inspecteur de propriétés :

  Augmentez la valeur indiquant le nombre de lignes ou de colonnes pour en ajouter.
  Réduisez la valeur indiquant le nombre de lignes ou de colonnes pour en supprimer.

  Dreamweaver ajoute et supprime les lignes au bas du tableau, et ajoute et supprime les colonnes à droite du tableau. Dreamweaver ne vous avertit pas si vous supprimez des lignes et des colonnes contenant des données.

  Fractionnement et fusion de cellules

  Utilisez l'inspecteur de propriétés ou les commandes du menu Modifier > Tableau pour fractionner ou fusionner des cellules. Vous pouvez fusionner n'importe quel nombre de cellules adjacentes (du moment que la sélection presente une forme rectangulaire) pour produit une cellule unique s'étendant sur plusieurs colonnes ou lignes. Vous pouvez fractionner une cellule en un nombre qualconque de lignes et de colonnes, qu'elle ait été precedemment fusconnée ou non. Dreamweaver réorganise automatiquement le tableau (en ajoutant les COLSPAN ou ROWSPAN nécessaires) afin de créé l'arrangement spécifique.

  Dans l'illustration ci-dessous, les cellules du milieu des deux premières lignes ont ete fusionnées de sorte qu'elles s'etendent sur deux lignes.

  Pour fusionner deux ou plusieurs cellules d'un tableau :

  1 Sélectionnéz les cellules à fusionner.

  Les cellules selectionnées doivent être contiguës etprésenter une forme rectangulaire.

  when	what	where
  09.25.98 3pm - 9pm	Honey Festival Featuring the Sonoma Strings	California, Sonoma
  10.01.98 11am - 1pm	Pear Canning Demonstration	Bend, Oregon
  10.08.98 7pm - 9pm	Benefit for Southwest Chamber Ensemble	Scottsdale, Arizona
  10.30.98 8pm - 10pm	Candlelight Walk through the Orchards	Monterey, California

  La seLECTION operee dans ce tableau n'était pas de forme rectangulaire, il est impossible de fusionner les cellules.

  when	what	where
  09:25.98 3pm - 9pm	Honey Festival Featuring the Sonoma Strings	California, Sonoma
  10:01.98 11am - 1pm	Pear Canning Demonstration	Bend, Oregon
  10:08.98 7pm - 9pm	Benefit for Southwest Chamber Ensemble	Scottsdale, Arizona
  10:30.98 8pm - 10pm	Candlelight Walk through the Orchards	Monterey, California

  La seLECTION operee dans ce tableau a une forme rectangulare de sorte qu'il est possible de fusionner les cellules.

  2 Choisissez Modifier > Tableau > Fusionner les cellules ou, dans l'inspecteur de propriétés, cliquez sur le bouton Fusionner les cellules.

  Le contenu des cellules individuelles est place dans les cellules produites par la fusion. Les propriétés de la première cellule sélectionnée sont appliquées à la cellule fusionnée.

  Pour fractionner une cellule fusionnée :

  1 Clique dans la cellule ou selectionnez une cellule.
  2 Choisissez Modifier > Tableau > Fractionner la cellule ou, dans l'inspecteur de propriétés, cliquez sur le bouton Fractionner la cellule.
  3 Dans la boîte de dialogue Fractionner la cellule, indiquez si vous pouze fractionner les cellules en lignes ou en colonnes, puis entrez le nombre de lignes ou de colonnes.

  Copie et collage de cellules

  Vou puez copier et coller plusieurs cellules de tableau à la fois, en réserveant leur formatage, ou ne copier et coller que leur contenu.

  Voupez coller les cellules à un point d'insertion ou à la place d'une seLECTION dans un tableau existant. Pour coller plusieurs cellules de tableau, il faut que le contenu du Presse-papiers soit compatible avec la structure du tableau ou de la selection du tableau dans laquelle les cellules seront collées.

  Pour couper ou copier des cellules dans un tableau :

  1 Sélectionnez une combinaison quelconque de cellules dans le tableau.

  Pour pouvoir être coupé ou copié, le groupe de cellules doit partager une forme rectangulaire. Voir Sélection d' éléments de tableau, page 198.

  when	what	where
  09.25.98 3pm - 9pm	Honey Festival Featuring the Sonoma Strings	California, Sonoma
  10.01.98 11am - 1pm	Pear Canning Demonstration	Bend, Oregon
  10.08.98 7pm - 9pm	Benefit for Southwest Chamber Ensemble	Scottsdale, Arizona

  Sélection incorrecte : il est impossible de couper ou de copier ces cellules.

  when	what	where
  09.25.98 3pm - 9pm	Honey Festival Featuring the Sonoma Strings	California, Sonoma
  10.01.98 11am - 1pm	Pear Canning Demonstration	Bend, Oregon
  10.08.98 7pm - 9pm	Benefit for Southwest Chamber Ensemble	Scottsdale, Arizona

  Sélection correcte : il est possible de couper ou coller ces cellules.

  2 Coupez ou copiez les cellules à l'aide des commandes du menu Édition. Si vous sélectionnez la ligne ou la colonne tout entière, elle disparaît du tableau lorsque vous choisissez Édition > Couper.

  Pour coller ces cellules de tableau :

  1 Choisissez l'endetroit où vous pouvez coller les cellules.
  Pour ajouter les cellules devant ou au-dessus de la cellule en cours, cliquez sur l'une des cellules du tableau.
  Pour creer un nouveau tableau avec les cellules, positionnez le curseur en dehors de tout tableau.
  2 Choisissez Édition > Coller.

  Si vous collez des lignes ou des colonnes entières, celles-ci s'ajoutent au tableau. Si vous collez une cellule isolée, le contenu de la cellule sélectionnée est remplaçé, pour autant que le contenu du Presse-papiers soit compatible avec la cellule sélectionnée. Si vous effectuez un collage en dehors d'un tableau, les lignes, colonnes ou cellules que vous collez sont utilisées pour définir un nouveau tableau.

  Pour supprimer le content d'une cellule en conservant les cellules intestes :

  1 Sélectionnez une ou plusieurs cellules.
  2 Choisissez Édition > Effacer ou appuyez sur la touche Suppr.

  Remarque: Si vous sélectionnez la ligne ou la colonne tout entière, elle disparait avec son contenu.

  Pour copier et coller le contenu de cellules :

  1 Sélectionnez le texte, puis choisissez Édition > Copier comme texte.

  Seul le texte des cellules selectionnées est copie dans le Presse-papiers.

  2 Cliquez sur une cellule ou à un endroit quelconque de la fenetre Document, puis choisissez Édition > Coller comme texte.

  Il est impossible de recoller les cellules copiees dans une selection de plusieurs cellules.

  CHAPITRE 12

  Utilisation des calques

  Utilisation des calques - Vue d'ensemble

  Les calques sont utilisés pour positionner les éléments avec précision dans la fenêtre du navigateur. Les calques peuvent conténir du texte, des images, des plugins et même d'autres calques – tout ce que vous pouvezmettre dans le corps d'un document HTML peut être mis dans un calque. Les calques sont particulièrement utiles pour la superposition de certaines parties de votre page.

  Vous pouvez afficher et masquer des calques avec des comportements afin de creer des pages au chargement rapide, qui sont modifiées sans devoir charger le contenu supplémentaire à partir des fichiers source. Grâce au scenario, vous pouvez déplacer ou changer les calques selon une ligne de temps.

  À propos des calques

  Il y a deux formats de calque pour le positionnement du contenu sur une page : Calques CSS et Netscape.

  • Les calques CSS (également connus sous l'appellation éléments CSS-P) positionnent le contenu sur la page à l'aide des balises DIV et SPAN. Les propriétés des calques CSS sont définies par le Consortium du World Wide Web.
  • Les calques Netscape positionnent le contenu sur la page à l'aide des balises Netscape LAYER et I layers. Les propriétés des calques Netscape sont définies par le format de calque propre à Netscape.

  Microsoft Internet Explorer 4.0 et Netscape Navigator 4.0 acceptent tous les deux les calques créés à l'aide des balises DIV et SPAN. Seul Navigator accepte les calques créés avec les balises LAYER et ILAYER. Les versions précédentes de Microsoft Internet Explorer 4.0 et Netscape Navigator 4.0 afficheront le contenu des calques, mais ils ne seront pas positionnés.

  Dans Dreamweaver, le terme "calque" correspond à tout élément qui peut être positionné à des coordonnées précises sur la page. Les propriétés de positionnement incluent les coordonnées X et Y (respectivement haut et gauche), l'index Z (égarlement appelé ordre de superposition), et la visibilité. Les éléments positionnés peuvent être définis avec les balises DIV, SPAN, LAYER et ILAYER dans Dreamweaver. Voir Configuration des préférences de calques, page 216.

  Creation de calques

  Créez des calques en utilisant les techniques d'insertion, de glisser-deplacer ou de dessin. Une fois le calque créé, utilisez la palette des calques pour le selectionner, imbriquez-le dans un autre calque ou modifiez son ordre de superposition. Voir Utilisation de la palette de calques, page 220.

  Les propriétés par défaut des calques, (balise, visibilité, hauteur et largeur, etc.) sont spécifiées dans les préférences des calques. Pour modifier les paramètres par défaut, choisissez Édition > Préférences et Sélectionnez Calques. Voir Configuration des préférences de calques, page 216.

  Par défaut, Dreamweaver creé les calques avec les balises DIV et insère le code du calque à la position du curseur, ou lorsque vous dessinez des calques, en haut de la page, juste après la balise BODY. Si vous creez un calque imbriqué, Dreamweaver insère le code dans la balise qui définit le calque parent.

  Lorsque vous creez des calques, pour empêcher qu'ils se chevauchent, activez l'options Empêcher le chevauchement dans la palette des calques, ou désissez Affichage > Empêcher le chevauchement des calques. Voir Empêcher le chevauchement des calques, page 228.

  Pour creer un calque, effectuez l'une des procedures suivantes :

  Pour insérer un calque, placez le curseur dans la fenetre du document, la où vous poulez positionner le calque, puis désisissez Insertion > Calque.
  Pour glisser-deplacer un calque, cliquez sur le bouton Calque de la palette d'objets et faites glisser le calque vers la fenetre de document. Le calque est placé à l'endetroit où la souris est relachée.
  Pour dessiner un calque dans la fenetre de document, cliquez sur le bouton Calque dans la palette d'objects, relachez la souris et utilisez le curseur pour dessiner.

  Un indicateur de calque apparait en haut et a gauche de la page dans la fenêtre de document. Si l'indicateur du calque n'est pas visible, choisissez Affichage > Éléments invisibles. Voir Paramétrage des préférences pour les éléments invisibles, page 85.

  Dans lapalette de calque, le nom du calque apparait dans la colonne Nom. Au fur et à mesure que vous creez des calques, ils sont affichés dans une liste de superposition – le plus recent se trouvant en haut de la liste. Voir Modification de l'ordre de superposition des calques, page 225.

  Imbrication des calques

  Un calque imbriqué est un calque créé à l'intérieur d'un autre calque. Utilisez la palette des calques ou les techniques d'insertion, de glisser-déplacer ou de dessin pour creator des calques imbriqués.

  Voussupouvrezutiliserl'imbrication pourregrouperlescalques.Un calque imbrique se déplace avecson calque parent et hérite de sa visibilité.Les calques Netscape créés avec les balises LAYER et ILAYER se développement pourcontainirla hauteuret la largeurde leur enfant.

  Voici un exemple de code HTML d'un calque imbriqué :

  Contenu interne au calque parent.

  Contenu interne au calque imbrique.

  </div>  
  </div> 
  

  Lorsque vous dessinEZ des calques, utilisez Preférences des calques pour forcer l'imbrication d'un calque créé à l'intérieur d'un autre calque. Choisissez Édition > Preférences, Sélectionnez Calques, puis cliquez dans la case à cocher Imbrication. Voir Configuration des préférences de calques, page 216. Pour creer un calque imbrique, effectuez l'une des procedures suivantes : Pour insérer un calque imbriqué, placez le curseur à l'intérieur d'un calque existant et choisissez Insertion > Calque. Pour glisser-deplacer un calque imbrique, cliquez sur le bouton Calque de la palette d'objects, puis, sans relacher le bouton de la souris, glissez-deplacez le calque à l'intérieur d'un calque existant. Pour dessiner un calque imbriéqué, cliquez sur le bouton Calque de la palette d'objets, relâchéz le bouton de la souris, puis utilisez le curseur pour dessiner un calque à l'intérieur d'un calque existant (si la case Imbrication est cochée dans Préférences des calques); autrement, appuyez sur Contrôle (Windows) ou Commande (Macintosh) tout en faisant glisser le calque.

  Pour creer un calque imbrique à l'aide de la palette des calques :

  1 Choisisse Fenetre > Calques pour ouvrir la palette des calques. 2 Appuyez sur la touche Contrôle (Windows) ou la touche Commande (Macintosh), puis selectionnez un calque dans la palette des calques et faites le glisser vers le calque cible. 3 Relâchéz le bouton de la souris lorsqu'une boîte apparait autour du nom du calque cible.

  Configuration des préférences de calques

  Utilisez Préférences des calques pour définir les paramètres par défaut des nouveaux calques. Choisissez Édition > Préférences, puis cliquez sur Calques pour modifier les préférences des calques. Balise Determine la balise par défaut utiliser pour définir le calque. SPAN et DIV créé des calques CSS; LAYER et ILAYER créé des calques Netscape. Visibilité Determine si les calques sont visibles par défaut. Largeur et Hauteur Définissant la largeur et la hauteur par défaut des calques créé à l'aide de Insertion > Calque. Couleur d'arrière-plan Determine la couleur d'arrière-plan par défaut. Image d'arrière-plan Sécífie une image d'arrière-plan par défaut. Imbrication Force l'imbrication d'un calque dessiné à l'intérieur des limites d'un calque existant. Alors que vous dessinez un calque, appuyez sur Contrôle (Windows) ou sur Commande (Macintosh) pour modifier cette configuration de façon-temporaire.

  Configuration des propriétés de calques

  Utilisez l'inspecteur des propriétés pour spécifier le nom et l'emplacement d'un calque ainsi que pour définir d'autres options de calque. Afin de voir toutes les propriétés suivantes, cliquez sur la flèche d'agrandissement, dans le coin inférieur droit de l'inspecteur des propriétés. Nom de calque Spécifie un nom pour identifier le calque dans la palette des calques et pour le script. Entrez un nom dans la boîte sans titre à gauche de l'inspecteur des propriétés. N'utilisez que des caractères alphanumericiques standard pour les noms de calque. N'utilisez pas de caractères spéciaux tels que les espaces, les tirets, les barres obliques ou les points. G et S Spécifient la position du calque par rapport au coin supérieur gauche de la page ou du calque parent. L et H Spécífient la largeur et la hauteur du calque. Ces valeurs sont remplacées si le contenu du calque dépasse la taille spécifique. En ce qui concerne les calques CSS, les valeurs par défaut pour l'emplacement et la taille sont en pixels (px). Vous pouvez aussi spécifique les unités suivantes : pc (picas), pt (points), in (pouces), mm (millimètres), cm (centimètres), ou % (pourcentage de la valeur du parent). Les abréviations doivent suivre la valeur sans espace : par exemple, 3mm. Le paramètre Débordement détermine comment les calques CSS réagissant lorsque le contenu dépasse leur taille. Index Z Détermine l'index Z ou l'ordre de superposition du calque. Plus le nombre de calque est élevé, plus le calque se trouve au-dessus des autres calques. Les valeurs peuvent être positives ou négatives. Nous vous conseillons d'utiliser la palette des calques pour modifier l'ordre de superposition des calques plutôt que de saisir des valeurs d'index Z spécifique. Voir Modification de l'ordre de superposition des calques, page 225. Les calques Netscape (celles avec la balise LAYER ou ILAYER) peuvent également être superposés de manière relative à d'autres calques de la page. Lorsque vous scélectionné un calque Netscape, deux options supplémentaires s'affichent dans le coin inférieur droit de l'inspecteur des propriétés. Utilisez l'options A/B afin de scélectionner une position relative, puis désissez le nom d'un autre calque dans le menu local juste à droite. (A spécifique un calque au-dessus du calque courant; B spécifique un calque au-dessous du calque courant). Visib. Déterminé la condition de l'affichage initial pour le calque. Utilisez un langage de script tel que JavaScript, pour contrôler la propriété de visibilité et afficher le contenu des calques de façon dynamique. Choisissez une des options suivantes : La valeur par défaut ne spécifie pas de propriété de visibilité, mais la plupart des navigateurs l'interprêtent comme Hériter. Hériter prend la propriété de visibilité du parent du calque. Visible affiche le contentu du calque, quelle que soit la valeur du parent. - Masqué dissimule le contenu du calque, qu'elle que soit la valeur du parent. Remarquez que les calques masqués créés avec LAYER et ILAYER prenant le même espace que si ils étaient visibles. Image ar-pl Sécífie une image d'arrière-plan pour le calque. Tapez le chemin de l'image dans la zone de texte ou cliquez sur l'icone de dossier pour rechercher et seLECTIONner un fjichier d'image. Couleur ar-pl Sécífie une couleur d'arrière-plan pour le calque. Laissez cette option vide pour spécifique un arrêté-plan transparent. Balise Détérôme si le calque est un calque CSS ou Netscape. SPAN et DIV créé des calques CSS ; LAYER et ILAYER créé des calques Netscape. Débord. (calques CSS seulement) Déterminé ce qui se passé lorsqu'le contenu d'un calque dépasse sa taille. Choisissez une des options suivantes: Visible augmente la taille du calque de façon à ce que tout son contenu soit visible. Le calque s'agrandit vers le bas et vers la droite. - Masque conserve la taille du calque et découpe tout contenu supérieur à la taille. Aucune barre de défilament n'est représentée. - Défilier ajoute des barres de défilament au calque, même si le contenu correspond à la taille du calque. Intégrer des barres de défilament évite la confusion causée par l' apparition et la disparition des barres de défilament dans un environnement dynamique. Seuls les navigateurs qui prennten en charge les barres de défilament accepteront cette option. - Auto ne fait apparaitre les barres de défilament que lorsque le contenu du calque excède les limites de ce dernier. Det. Définit la partie du calque qui est visible. Entrez les valeurs représentant la distance en pixels par rapport aux limites du calque. Les paramètres S (sommet) et G (gauche) sont relatifs au calque, pas à la page. Utilisez G, H ou PageX, PageY (calques Netscape seulement) Vous permit de positionner un calque par rapport à son parent. L'option G, H place le calque par rapport au coin supérieur gauche de son parent. L'option PageX, PageY place le calque à l'emplacement absolu relatif au coin supérieur gauche de la page, celle que soit la position de son parent. Src (calques Netscape seulement) you permit d'afficher un autre document HTML à l'intérieur du calque. Tapez le chemin du document ou cliquez sur l'icone dossier pour parcourir et selectionner le document. Remarquez que Dreamweaver n'affiche pas cette propriété dans la fenetre Document. A/B (calques Netscape seulement) spécifie le calque au-dessus (A) ou au-dessous (B) du calque courant, selon l'ordre de superposition (index Z). Seuls les calques précédemment définis dans le document apparaîtrent dans la liste des noms de calque, à droite du menu A/B.

  Configuration des propriétés pour plusieurs calques

  Lorsque vous sélectionné deux calques ou plus, l'inspecteur des propriétés de calques affiche les propriétés du texte et un ensemble de propriétés vous permettant de modifier plusieurs calques à la fois. Pour selectionner plusieurs calques, appuyez sur Maj tout en selectionnant les calques. Voir Manipulation des calques, page 220. Pour plus de détails sur le formatage du texte des calques, voir Propriétés du texte dans les pages d'aide de Dreamweaver. G et S Spécífient la position du calque par rapport au coin supérieur gauche de la page ou du calque parent. L et H Spécífient la largeur et la hauteur du calque. Ces valeurs sont remplacées si le contenu du calque dépasse la taille spécifique. En ce qui concerne les calques CSS, les valeurs par défaut pour l'emplacement et la taille sont en pixels (px). Vous pouvez aussi spécifique les unités suivantes : pc (picas), pt (points), in (pouces), mm (millimètres), cm (centimètres), ou % (pourcentage de la valeur du parent). Les abréviations doivent suivre la valeur sans espace : par exemple, 3mm. Visib. Déterminé la condition de l'affichage initial pour le calque. Utilisez un langage de script tel que JavaScript, pour contröler la propriété de visibilité et afficher le contenu des calques de façon dynamique. Choisissez une des options suivantes : La valeur par défaut ne spécifie pas de propriété de visibilité, mais la plupart des navigateurs l'interprêtent comme Hériter. Hériter prend la propriété de visibilité du parent du calque. Visible affiche le contentu du calque, quelle que soit la valeur du parent. - Masque affiche le content du calque comme transparent, qu'elle que soit la valeur du parent. Remarquez que les calques masqués créé avec LAYER et ILAYER prennant le même espace que si ils étaient visibles. Balise Dérômenime si le calque est un calque CSS ou Netscape. SPAN et DIV créé des calques CSS ; LAYER et ILAYER créé des calques Netscape. Image ar-pl Sécífie une image d'arrière-plan pour le calque. Tapez le chemin de l'image dans la zone de texte ou cliquez sur l'icone de dossier pour rechercher et seLECTIONner un fisier d'image. Couleur ar-pl Spécifique une couleur d'arrière-plan pour le calque. Laissez cette option vide pour spécifique un arrêté-plan transparent.

  Utilisation de la palette de calques

  La palette Calque est une carte graphique des calques de votre document. Choisissez Fenêtre > Calques pour ouvrir lapalette de calque. Les calques sont affichés comme une liste de noms superposés ; le premier calque créé se trouve au bas de la liste, le plus récent au sommet. Les calques imbriqués sont affichés comme des noms connectés à des calques parents. Cliquez sur la flèche d'agrandissement pour afficher ou masquer les calques imbriqués. Utilisez la palette Calque pour empêcher les calques de se chevaucher, pour en modifier la visibilité, pour les imbriquer ou les superposer, et pour en sélectionner au moins un. Pour imbriquer un calque dans un autre calque, voir Imbrication des calques, page 215. Pour selectionner un ou plusieurs calques, voir Manipulation des calques, page 220. Pour modifier l'ordre de superposition d'un calque, voir Modification de l'ordre de superposition des calques, page 225. Pour modifier la visibilité d'un calque, voir Modification de la visibilité des calques, page 225. Pour empêcher les calques de se chevaucher, voir Empêcher le chevauchement des calques, page 228.

  Manipulation des calques

  Alors que vous travailliez sur la mise en forme, les calques peuvent être activés, sélectionnés ou redimensionnés. Mettre les calques en mode actif vous permet de placer un contenu dans ces calques. Sélectionner les calques vous permet de les aligner, de les repositionner ou de les redimensionner. Redimensionner les calques vous permet de modifier les dimensions d'un seul calque ou demettre deux ou plusieurs calques à la même taille (hauteur et largeur). Différents inspecteurs de propriétés apparaissent lorsque vous travailliez avec un seul ou plusieurs calques. Voir Configuration des propriétés de calques, page 217 et Configuration des propriétés pour plusieurs calques, page 219. De même, les options de menu de modification des calques ne sont activées que lorsque plusieurs calques sont sélectionnés. Pour empêcher les calques de se chevaucher, utilisez l'option Empêcher le chevauchement. Voir Empêcher le chevauchement des calques, page 228.

  Activation des calques

  On active un calque pour pouvoir y placer des objets. Activer un calque place le curseur dans le calque, met en surbrillance la cordure du calque et affiche la poignée de selection, mais cela ne seLECTIONne pas le calque.

  Pour activer un calque :

  Cliquez n'importe ou dans le calque.

  Sélection des calques

  Selectionnez un ou plusieurs calques pour les aligner, donnez-leur tous la même longueur et la même hauteur, repositionnez-les et ainsi de suite. Pour une liste d'options complète, voir Configuration des propriétés de calques, page 217.

  Pour selectionner un calque, effectuez l'une des procédures suivantes :

  - Cliquez sur l'indicateur du calque dans la fenêtre Document qui représenté son emplacement dans le code HTML. Si cet indicateur n'est pas visible,CHOISSEZ AFFICHAGE > Éléments invisibles. - Cliquez sur la poignée de selection d'un calque. Si la poignée n'est pas visible, cliquez n'imprime où dans le calque pour la faire apparaitre.  Cliquesur la bordured'un calque. Si aucun calque n'est actif ou seLECTIONné, cliquez dans un calque tout en appuyant sur Maj. Si plusieurs calques sont selectionnés, cliquez dans un calque tout en appuyant sur Contrôle-Maj (Windows) ou Commande-Maj (Macintosh). Cette procédure annulera la selection des autres calques. - Cliquez sur le nom du calque dans la palette Calque. Pour selectionner plusieurs calques, effectuez l'une des procédures suivantes : Appuyez sur Maj tout en cliquant à l'intérieur ou sur la cordure de plusieurs calques. Appuyez sur Maj tout en cliquant sur plusieurs noms de calque dans la palette Calque. Lorsque plusieurs calques sont selectionnés, la cordure et les poignées du dernier calque selectionné apparaisent en surbrillance noire.

  Redimensionnement des calques

  Redimensionnez un calque ou plusieurs calques à la fois pour qu'ils aient tous la même largeur et la même hauteur. Si l'option Empêcher le chevauchement est activée, vous ne pourrez pas redimensionner un calque s'il doit en chevaucher un autre. Voir Empêcher le chevauchement des calques, page 228. Pour redimensionner un calque, effectuez l'une des procédures suivantes : Pour redimensionner en faisant glisser, selectionnez le calque et faites glisser les poignées de redimensionnement. Pour redimensionner d'un pixel à la fois, Sélectionné le calque et appuyez sur Ctrl-flèche (Windows) ou Option-flèche (Macintosh). Pour redimensionner en alignant sur la grille, Appuyez sur Maj-Ctrl-flèche (Windows) ou Maj-Option-flèche (Macintosh). Le redimensionnement d'un calque en modifie la largeur et la hauteur. Cela ne définit pas la partie visible du contenu du calque. Pour définir la région visible d'un calque, voir Configuration des propriétés de calques, page 217.

  Pour redimensionner plusieurs calques :

  1 Dans la fenêtre Document, Sélectionnez au moins deux calques. 2 Effectuez l'une des opérations suivantes : - Choisissez Modifier > Calques > Meme largeur ou Meme hauteur. Les premiers calques sélectionnés prendront la largeur ou la hauteur du dernier sélectionné (en surbrillance noire). - Dans l'inspecteur des propriétés, sous Calques multiples, entrez les valeurs pour la largeur et la hauteur. Les valeurs sont appliquées à tous les calques sélectionnés.

  Déplacement des calques

  Déplacer les calques dans la fenêtre Document paraítra une opération familière pour tous ceux qui ont déjà travaillé avec des applications graphiques de base. Si l'option Empêcher le chevauchement est activée, vous ne pourrez pas déplacer un calque s'il doit en chevaucher un autre. Voir Empêcher le chevauchement des calques, page 228. Pour déplacer un ou plusieurs calques, effectuez l'une des procédures suivantes : Pour déplacer en faisant glisser, sélectionner les calques et faites glisser la poignée de selection du dernier calque sélectionné (en surbrillance noire). Pour déplacer d'un pixel à la fois, Sélectionnéz les calques et utiliser les touches fléchées. Utilisé Maj-Flèche pour déplacer le calque en fonction de l'alignement courant sur la grille.

  Alignment des calques

  Utilisez les commandes d'alignement pour aligner un ou plusieurs calques avec la cordure spécifiée du dernier calque sélectionné. Lors de l'alignement, il est possible que les calques enfants qui ne sont pas seLECTIONnés soient déplaces en même que leur parent. Pour éviter ceci, n'utilise pas les calques imbriqués.

  Pour aligner au moins deux calques :

  1 Sélectionnez les calques. 2 Choisissez Modifier > Calques et Sélectionnéz une option d'alignement. Par exemple, si vous sélectionnez Aligner en haut, tous les calques se déplacent pour que leurs cordures supérieures soient toutes au même niveau que celle du dernier calque sélectionné (en surbrillance noire).

  Alignement des calques sur la grille

  Utilisez la grille comme un guide visuel pour le positionnement ou le redimensionnement des calques dans la fenetre Document. Si l'alignement est activé, les calques sont automatiquement positionnés à la position d'alignement la plus proche lorsqu'ils sont déplaces ou redimensionnés. L'alignement fonctionne que la grille soit visible ou pas.

  Pour afficher la grille, effectuez l'une des procédures suivantes :

  - Choisissez Affichage > Grille > Afficher. - Choisissez Affichage > Grille > Paramètres et Sélectionnez l'option Grille visible.

  Pour aligner un calque :

  1 Choisissez Affichage > Grille > Aligner sur pour activer l'alignement (ou le désactiver). 2 Sélectionnez le calque et faites-le glisser. Lorsque vous le relâchez, le calque se déplace vers la position d'alignement la plus proche.

  Pour modifier les paramètres de la grille et de l'alignement :

  1 Choisissez Affichage > Grille > Paramètres pour ouvrir la boîte de dialogue. 2 Sélectionnez les options désirées. - Grille visible - rend la grille visible. Cette option fonctionne de pair avec la commande Afficher (Affichage >Grille > Afficher). - Espacement - définit la distance entre les indicateurs de grille. Saisissez un nombre d'unités, puis choisissez pixels, pouces ou centimètres dans le menu contextualuel des unités. Couleur - spécifie la couleur des marqueurs de la grille. La couleur par défaut est bleu clair. Affichage - spécifie un affichage de grille sous forme de lignes ou de points. - Alignment - active ou déactive l'alignment. Cette option fonctionne de pair avec la commande Aligner sur (Affichage >Grille >Aligner sur). Aligner tous les - spécifique une unité d'alignement. Saisissez un nombre d'unités dans la zone Aligner tous les etCHOisissez pixels, pouces ou centimètres dans le menu déroulant des unités. La valeur par défaut est 5 pixels. Pour que les calques soient alignés sur la grille, les unités de pixels de la grille et de l'alignement doivent être les mêmes. Par exemple, si l'espacement est définir à 50 pixels, configurez "Aligner tous les" à 50 pixels. 3 Cliquez sur OK.

  Modification de l'ordre de superposition des calques

  Utilisez l'inspecteur des propriétés ou la palette Calque pour modifier l'ordre de superposition des calques. Le premier calque de la liste est celui qui est au premier plan. En code HTML, l'index Z détermine l'ordre dans lequel les calques se dessinent dans un navigateur. Vous pouvez modifier l'index Z de chaque calque à l'aide de l'inspecteur des propriétés ou de la palette Calque, mais la procédure suivante est beaucoup plus simple.

  Pour modifier l'ordre de superposition des calques :

  1 Choisissez Fenetre > Calques pour ouvrir la palette de calques. 2 Sélectionnez un calque dans la palette et faites-le glisser vers le haut ou vers le bas. 3 Relâchez le bouton de la souris lorsqu'une ligne apparait entre les calques.

  Modification de la visibilité des calques

  Alors que vous travailliez sur votre document, vous pouvez afficher ou masquer les calques pour voir comment la page apparaitra sous différentes conditions. Utilisez la palette de calques pour modifier la visibilité des calques. Utilisez le volet Préférences des calques pour définir la visibilité par défaut des nouveaux calques. Voir Configuration des préférences de calques, page 216.

  Pour modifier la visibilité d'un calque :

  1 Choisisse Fenetre > Calques pour ouvrir lapalette de calques. 2 Cliquez sur la colonne de l'icone en forme d'eel pour modifier la visibilité. Un eeil ouvert signifie que le calque est visible. Un eeil fermé signifie que le calque est invisible. S'il n'y a pas d'icone en forme d'eel, le calque hérite de la visibilité de son parent. Pour les calques non imbriqués, le parent est le corps du document, lequel est always visible. Pour modifier la visibilité de tous les calques à la fois, cliquez sur l'en-tête d'icone en forme d'ceil qui se trouve en haut de la colonne.

  Utilisation des calques pour conceiveir des tableaux

  Les calques sont utilisés pour positionner le contenu d'une page et il est plus facile de manipuler et de travailler avec des calques qu'vec des cellules de tableau. Vous pouvez utiliser les calques pour creer rapidement des pages complexes, puis les convertir en tableau pour qu'ils soient disponibles dans les navigateurs 3.0. Vous pouvez aussi passer des calques au tableau et vice versa, pour peaufiner la mise en forme et optimiser la presentation de la page. Si vous ne visez que les navigateurs 4.0 et plus récents, vous pouvez utiliser une combinaison de tableaux et de calques et même animer vos calques. Voir Animation avec HTML dynamique, page 286. Remarque: Si vous voulez générer des fischiers compatibles avec 3.0 ou 4.0 à partir de votre fichier courant, utilisez les options de conversion du menu Fichier. Voir Conversion des navigateurs de 3.0 à 4.0, page 229.

  Pour passer en mode d'edition de calque :

  1 Choisissez Modifier > Mise en forme > Repositionner le contenu à l'aide des calques.  2 Dans la boite de dialogue qui s'affiche, selectionnez les options désirées. Afficher la grille et Aligner sur la grille – vous permettent d'utiliser une grille pour vous aider à positionner les calques. Voir Alignment des calques sur la grille, page 223. Empêcher le chevauchement des calques - limite la position des calques lorsqu'ils sont créés, déplaces et redimensionnés afin d'éviter tout chevauchement. Voir Empêcher le chevauchement des calques, page 228. Afficher la palette Calque - affiche la palette des calques. Voir Utilisation de la palette de calques, page 220. 3 Cliquez sur OK. Les tableaux sont convertis en calques à l'intérieur du fjchier. Les cellules vides ne sont pas converties en calques. Le contenu extérieur aux tableaux est également placé dans des calques.

  Pour passer en mode d'edition de tableau :

  1 Choisissez Modifier > Mise en forme > Convertir Calques vers tableau. 2 Dans la boîte de dialogue qui s'affiche, Sélectionnez les options désirées pour la mise en forme du tableau. Le plus exact - cree une cellule de tableau pour chaque calque, et ajoute les cellules nécessaires pour preserver l'espace entre les calques. Le plus petit : Réduire les cellules vides – indique que les calques doivent avoir leurs bords alignés s'il sont positionnés à l'intérieur du nombre de pixels définis. Si cette option est sélectionnée, le tableau qui en résultat contienda moins de lignes et moins de colonnes vides. Utiliser des GIF transparents - remplit la dernière ligne du tableau avec des GIF transparents. Cela garantit que l'affichage du tableau sera le même dans tous les navigateurs. Si cette option est activée, il est impossible d'editor le tableau qui en résultat en faisant glisser ses colonnes. Si cette option est désactivée, le tableau ne contienda pas de GIF transparent, mais il peut s'afficher légerement différemment selon les navigateurs. Centrer sur la page - centre le tableau dans la page. Si cette option est désactivée, le tableau est justifié à gauche. 3 Sélectionnez les options de grille et les outils pour la mise en forme, puis cliquez sur OK.

  Empêcher le chevauchement des calques

  Étant donné que les cellules d'un tableau ne peuvent pas se chevaucher, Dreamweaver ne peut pas creer de tableau à partir de calques qui se chevauchent. Si vous prévoyez de convertir les calques d'un document en tableaux pour qu'il y ait compatibilité avec les navigateurs 3.0, utilisez l'option Empêcher le chevauchement afin que le déplacement et le positionnement des calques soient restreints et qu'ainsi les calques ne se chevauchent pas.

  Pour empêcher les calques de se chevaucher :

  - Choisissez Affichage > Empêcher le chevauchement des calques, ou activez l'option Empêcher le chevauchement dans la palette des calques.  Si cette option est activée, aucun calque ne peut être créé, déplace ou redimensionné au-dessus d'un calque existant, ni y soit imbriqué. Si cette option est activée après que des calques se chevauchant aient été créés, faites glisser le calque du dessus pour supprimer le chevauchement. Si cette option et celle d'alignement sont activées,aucun calque ne sera aligné sur la grille si cela doit causeur un chevauchement de calques.Par contre,le calque sera aligné avec le bord du calque le plus proche. Remarque: Certaines actions ne vous empêchent pas de faire chevaucher les calques, même lorsque l'option Empêcher le chevauchement est activée. Si vous insérez un calque à partir du menu, que vous entrez des nombres dans l'inspecteur de propriétés ou que vous repositionné des calques enéditant le code source HTML dans l'inspecteur HTML, vous pouvez provoquer le chevauchement ou l'imbrication des calques alors que l'options est activée. Si cela se produit, faites glisser les calques qui se chevauchent dans la fenêtre Document afin de les séparer.

  Conversion des navigateurs de 3.0 à 4.0

  Utilisez les options de conversion du menu Fichier pour creer une version compatible avec un navigateur 3.0 d'une page qui utilise des calques, ou pour convertir un document qui utilise des tableaux en un document qui utilise des calques. Dans chaque cas, Dreamweaver create un fisier converti séparé et conserve l'original. En général, vous ne devriezaccomplir ces conversions que lorsque vous etes totalement satisfait de votre fjichier original, car vous devrez repeter l'opération de conversion chaque fois que vous changerez le fjichier original. Remarque: Si vous poulez utiliser des calques pour la mise en forme d'une page destinée aux navigateurs 3.0, utilisez les commandes Mise en forme du menu Modifier, afin de convertir les tableaux en calques sans creator de fichier séparé. Voir Utilisation des calques pour conceiveoir des tableaux, page 226.

  Pour convertir un fichier destiné aux navigateurs 3.0 :

  1 Choisissez Fichier > Convertir > Navigateur compatible avec 3.0. 2 Dans la boite de dialogue qui s'affiche,CHOISISEZ LA CONVERSION DES CALQUES en tableau, des styles CSS en indicateurs HTML (styles des caractères) ou les deux. 3 Cliquez sur OK. Dreamweaver ouvre le fjichier converti dans une nouvelle fenetre sans titre. Tous les calques sont replacés par un seul tableau qui préserve le positionnement d'origine. Remarque: Ni les calques qui se chevauchent, ni ceux qui se trouvent en dehors de la page (à gauche ou en haut) ne peuvent être convertis. L'indicateur CSS est remplaced quand cela est possible par des styles de caractère HTML. Tout indicateur CSS qui ne peut pas etre converti en HTML est supprimé. Voir Tableau de conversion de code CSS en HTML, page 183 pour plus de détails sur les styles qui sont convertis et ceux qui sont supprimés. Le code du scenario qui animé les calques est supprimé. Le code du scenario qui n'est pas relatif aux calques, (par exemple, les comportements ou les modifications de la source de l'image) sera executé comme prévu. Le scenario est automatiquement réinitialisé au cadre 1.

  Pour convertir des tableaux en calques :

  Choisissez Fichier > Convertir > Tableaux en calques. Dreamweaver ouvre le fjichier converti dans une nouvelle fenetre sans titre. Chaque cellule de tableau est convertie en un calque séparé et les cellules vides ne sont pas converties. Le contenu extérieur aux tableaux est placé dans un seul calque. Utilisez les comportements, les scénarios et CSS pour que vous page 3.0AAPARAVANT statique soit plus dynamique et plus interessante.

  CHAPITRE 13

  Utilisation de cadres

  Utilisation de cadres – Vue d'ensemble

  Les cadres divisent une page web de façon à ce que différents fichiers puisent être chargés à plusieurs endroits sur une même page. De manière générale, les cadres définissant une zone de navigation et de contenu pour une page. Lorsque vous divisez un document en cadres, Dreamweaver create un fisquier de définition des cadres et des documents sans titre pour chacun des nouveaux cadres. Ce que l'utilisateur voit comme une page web unique compteant deux cadres, est en fait constitué de trois fischiers séparés : le fisquier de définition des cadres, et deux fischiers constituant le contenu de chaque cadre. Un jeu de cadres et un fischier qui définit une page web selon des cadres. Le jeu de cadres stocke les informations sur la taille et l'emplacement des cadres de la page, ainsi que les noms des fischiers qui devraient etre chargés comme contenu de chacun des cadres. Vou puez modifier les propriétés des cadres et des yeux de cadres, redimensionner les cadres et utiliser des liens pour contrôler leur contenu. Lorsque Affichage > Bordures de cadre est desactivée, le jeu de cadres apparait exactement comme dans un navigateur. Lorsque les cordures de cadres sont affichées, Dreamweaver ajoute de l'espace autour du document pour la cordure et élargit les petites cordures pour qu'elle soient plus facies à selectionner et à faire glisser.

  Création de cadres

  Creez un cadre en faisant glisser une cordure de cadre, ou enCHOISSSANT les commandes dans le menu Modifier.

  Pour creer de nouveau cadres, proceder d'une des facons suivantes :

  - Choisissez Modifier > Jeu de cadres > Fractionner le cadre à gauche, à droite, vers le haut ou vers le bas. - Choisissez Affichage > Bordures de cadre et faites glisser la cordure d'un cadre dans la fenêtre Document, tout en appuyant sur Alt (Windows) ou sur Option (Macintosh), afin de scinder le cadre verticalément ou horizontallyment. Faites glisser l'un des coins pour fractionner le cadre courant en quatre nouveaux cadres. 

  Pour supprimer un cadre :

  - Faites glisser la cordure de ce cadre à l'extérieur de la page ou vers la cordure du cadre parent.

  Création d'un jeu de cadres imbriqués

  Scinder un cadre existant entraîne la création d'un nouveau jeu de cadres à l'intérieur du fichier du jeu de cadres courant. Un jeu de cadres à l'intérieur d'un autre jeu de cadres est appelé un jeu de cadres imbriqué.

  Pour creer un jeu de cadres imbrique :

  1 Placez le curseur a l'intérieur d'un cadre existant. 2 Choisissez Modifier > Jeu de cadres > Fractionner le cadre vers le haut, vers le bas, à gauche, ou à droite. Il est également possible, tout en appuyant sur Alt (Windows) ou sur Option (Macintosh), de faire glisser la cordure d'un cadre dans la fenêtre Document, afin de fractionner le cadre verticalément ou horizontally. Pour voir le code HTML, Sélectionné le jeu de cadres parent en cliquant sur sa cordure, puis ouvrez l'inspecteur HTML. Le code ressemble à ceci : Vous pouvez voir comment le nouveau jeu de cadres est mis en retrait à l'intérieur du jeu parent.

  Enregistrement des fichiers dans les cadres et les yeux de cadres

  Une page avec des cadres inclut plusieurs fischiers. Choisissez l'option appropriée pour enregistrer un fisquier à l'intérieur d'un cadre, le fisquier de jeu de cadre, ou tous les fischiers d'un coup.

  Pour enregistrer des fichiers dans un jeu de cadres,CHOISSEZ l'une des options suivantes :

  Pour enregistrer un document à l'intérieur d'un cadre, placez le curseur dans le cadre et choisissez Fichier > Enregistrer. Pour enregistrer un fichier de jeu de cadres,CHOISSEF Fichier > Enregistrer jeu de cadres, ou Fichier > Enregistrer jeu de cadres sous. Pour enregistrer tous les fichiers ouverts en une seule opération,CHOISSEF Fichier > Enregistrer tout.

  Sélection d'un cadre ou jeu de cadres

  Sélectionnez des cadres ou des yeux de cadres pour modifier leurs propriétés. L'inspecteur de propriétés affiche les propriétés du cadre ou du jeu de cadres sélectionné. Voir À propos des propriétés de cadre et jeu de cadre, page 235.

  Pour selectionner un cadre,proceder d'une des facons suivantes：

  Alt-cliquez (Windows) ou Maj-Option-cliquez (Macintosh) dans un cadre. - Choisissez Fenêtre > Cadres, puis cliquez sur un cadre dans l'inspecteur de cadres. Pour selectionner un jeu de cadres, proceder d'une des façons suivantes : Cliquez sur une cordure de cadre dans la fenetre Document. - Cliquez sur la cordure encadrant les cadres dans l'inspecteur de cadres. Lorsqu'un jeu de cadres est selectionné, toutes les cordures de ses cadres sont soulignées par une ligne pointillée dans la fenêtre Document. Pour déplacer la sélection vers le cadre suivant, procédez d'une des façon suivantes : - Appuyez en même temps sur une touche de direction et sur Alt (Windows), ou Commande (Macintosh), pour déplacer la seLECTION vers le cadre suivant. - Appuyez en même temps sur la touche de direction Haut et sur Alt (Windows), ou Commande (Macintosh), pour déplacer la seLECTION vers le jeu de cadres parent. - Appuyez en même temps sur la touche de direction Bas et sur Alt (Windows), ou Commande (Macintosh), pour déplacer la sélection vers le cadre infant. Si l'inspecteur HTML est ouvert, il suit la selection de la fenêtre Document courante dans le code HTML.

  Utilisation de l'inspecteur de cadres

  L'inspecteur de cadres affiche les yeux de cadres dans le document courant et vous permet de selectionner les cadres ou yeux de cadres, pour en modifier les propriétés. L'inspecteur de cadres affiche également la hierarchie de la structure du jeu de cadres, de façon non apparente dans la fenêtre Document. Les yeux de cadres ont des cordures tridimensionnelles épaisses. Les cadres ont de fines lignes grises et leur nom est affchéé. Pour afficher l'inspecteur de cadres : Choisissez Fenetre > Cadres. Pour selectionner un cadre dans linspecteur de cadres : Cliquez sur un cadre dans l'inspecteur de cadres. Pour selectionner un jeu de cadres dans l'inspecteur de cadres : - Cliquez sur la cordure encadrant les cadres dans l'inspecteur de cadres. Lorsqu'un jeu de cadres est seLECTIONné, toutes les cordures de ses cadres sont soulignées par une ligne pointillée dans la fenêtre Document.

  À propos des propriétés de cadre et jeu de cadre

  Deux yeux de propriétés contrôlent l'apparce et les propriétés des documents avec cadres. - Les propriétés des cadres déterminent le nom du cadre, le fichier source, les marges, le défilament, et le redimensionnement des cadres individuellement. - Les propriétés des yeux de cadres contrôle les dimensions des cadres, ainsi que la couleur et la largeur des cordures entre les cadres. (Choisissez Fenêtre > Propriétés pour afficher l'inspecteur de propriété s'il n'est pas déjà ouvert). Voir Utilisation de cadres - Vue d'ensemble, page 231 pour plus de détails sur les cadres. Pour afficher les propriétés de cadre, procéder d'une des façon suivantes : Alt-cliquez (Windows) ou Maj-Option-cliquez (Macintosh) un cadre. - Cliquez sur un cadre dans l'inspecteur de cadres. Voir Configuration des propriétés de cadres, page 235. Pour afficher les propriétés de jeu de cadres, procéder d'une des façon suivantes : - Cliquez sur une cordure de cadre dans la fenetre Document. Cliquez sur la cordure encadrant les cadres dans l'inspecteur de cadres. Voir Configuration des propriétés de jeu de cadres, page 236.

  Configuration des propriétés de cadres

  Pour afficher les propriétés des cadres, cliquez sur un cadre tout en appuyant sur Alt (Windows) ou sur Option (Macintosh). Afin de voir toutes les propriétés des cadres suivantes, cliquez sur la flèche d'agrandissement, dans le coin inférieur droit de l'inspecteur des propriétés : Cadre Déterminé le nom du cadre courant à utiliser pour les références du script et de la cible d'hyperlien. Le nom du cadre doit être en un seul mot. Les caractères de soulignement (_) sont autorisés, mais pas les traits d'union (-), les points (.), ou les espaces. Src Déterminé le document source du cadre. Entrez un nom de fichier ou cliquez sur l'icone du dossier pour trouver le fichier source et le selectionner. Vous pouvez aussi ouvrir un fichier dans un cadre, en plaçant le curseur dans le cadre, et en choisissant Fichier > Ouvrir dans un cadre. Défilier Déterminé si la barre de défilament apparait lorsqu'il n'y a pasASFZde place pour afficher le contenu du cadre courant. La valeur par défaut de la plupart des navigateurs est Auto. Ne pas redimens. Empêche l'utilisateur de faire glisser la cordure du cadre courant et de le redimensionner. Vous pouvez toujours redimensionner les cadres dans la fenêtre Document, mais pas dans un navigateur lorsque cette option est activée. Bordures Contrôle la cordure du cadre courant. Les options sont Oui, Non et Par défaut. Ce besoin annule la configuration de cordure définie pour le jeu de cadres (consultez Propriétés des jours de cadres). La valeur par défaut de la plupart des navigateurs est Oui. Pour désactiver une cordure, tous les cadres adjacents doivent être paramétrés à Non (ou paramétrés à Par défaut, avec le jeu de cadres parent paramétré à Non). Couleur de cordure Définit une couleur de cordure pour toutes les cordures adjacentes au cadre courant. Cette configuration annule la couleur de cordure définitie pour le jeu de cadres (voir Configuration des propriétés de juste de cadres). Largeur de marge Définit la largeur des marges de croite et de gauche en pixels (l'espace entre la cordure du cadre et le contenu). Hauteur de marge Définit la hauteur des marges en haut et en bas du cadre en pixels (l'espace entre la cordure du cadre et le contenu).

  Configuration des propriétés de jeu de cadres

  Pour afficher les propriétés d'un jeu de cadre, cliquez sur sa cordure. Pour voir toutes les propriétés des jours de cadres, cliquez sur la flèche d'agrandissement, dans le coin inférieur droit de l'inspecteur des propriétés. Bordures Contrôle la cordure des cadres compris dans le jeu de cadres courant. Choisissez Oui pour afficher les cordures en 3D et en gris,CHOISISSEZ Non pour les afficher en 2D et grises, ou choisissez Par défaut pour laisser le navigateur déterminer leur affichage. La valeur par défaut de la plupart des navigateurs est Oui. Larg. de bordure Spécifique la largeur des cordures du jeu de cadres courant. Couleur de cordure Définit une couleur de cordure pour toutes les cordures dans le jeu de cadres courant. Ce paramètre peut être remplaced par une couleur de cordure spécifique pour un cadre particulier. Valeur Spécifique la taille de la colonne ou de la ligne sélectionnée. Voir Spécification des tailles des cadres, page 237. Unités Spécifie si la ligne ou la colonne sélectionnée est représentée par une taille fixe (en pixels), un pourcentage de la fenêtre du navigateur, ou doit être élargie/ rétrécie afin de replir l'espace de la fenêtre inutilisé (relatif). Voir Spécification des tailles des cadres, page 237. Selection lig./col. Identifie la ligne ou la colonne selectionnée. Cliquez sur les onglets de gauche pour selectionner un ligne, et sur les onglets du haut pour selectionner une colonne. Voir Specification des tailles des cadres, page 237.

  Spcification des tailles des cadres

  Déplacez la cordure d'un cadre dans la fenêtre de documents pour déterminer les tailles approximatives des cadres, puis utilisez l'inspecteur de propriétés pour spécifique comment les navigateurs doivent allouer l'espace aux cadres lorsque l'espace disponible est insuffisant pour afficher tous les cadres à leur taille maximum.

  Pour spécifique les tailles de cadre :

  1 Cliquez sur la cordure d'un cadre pour selectionner le jeu de cadres. Choisissez Affichage > Bordures de cadre si les bordures ne sont pas visibles. 2 Dans l'inspecteur de propriétés, cliquez sur la flèche d'agrandissement pour voir toutes les propriétés. 3 Cliquez sur l'onglet en haut d'une colonne, ou a gauche d'une ligne, afin de seLECTIONner ce que vous pouze modifier.  4 Pour spécifique comment l'espace est alloué lorsque la fenêtre du navigateur est redimensionné, entrez un nombre dans la boîte Valeur, et faites votre choix à partir des options Unités suivantes : Pixels définit la taille de la colonne ou de la lignée sélectionnée à une valeur absolue. Cette option constitue le choix idéal pour un cadre qui devrait toujours être de la même taille, tel que la barre de navigation. Si vous définissez une option d'unité différente pour les autres cadres, l'espace leur sera alloué seulement lorsque les cadres spécifiés en pixels seront en pleine taille. Pourcentage spécifique que le cadre courant doit correspondre à un pourcentage par rapport à son jeu de cadres. Les cadres spécifique avec des unités définies en Pourcentage se voient leur espace alloué après les unités définies en Pixels, mais avant les cadres dont les unités sont Relative. Relative spécifique que l'espace alloué au cadre courant est proportionnel aux autres cadres. L'espace des cadres dont les unités sont définies en tant que relatives, est alloué après celui dont les unités sont en pixels et en pourcentage; cet espace constitue tout l'espace restant dans la fenêtre du navigateur.

  Configuration des cordures de cadres et de jeu de cadre

  Vouspouvezspecifiercommentlesborduresdecadreetdejeudcadres apparaissont surla page.Lorsqueyouspécifiezdesoptionsdebordurepour un cadre,l'optiondejeudecadre correspondanteestignorée.

  Pour définit des cordures de cadre :

  1 Sélectionnez le cadre en cliquant tout en maintainant la touche Alt (Windows) enforcée ou Maj-Option-cliquez (Macintosh) ou cliquez sur un cadre dans l'inspecteur de cadres. 2 Définissez les options suivantes : Bordures contrôle la cordure des cadres courants. Les options sont Oui, Non et Par défaut. La valeur par défaut de la plupart des navigateurs est Oui. Pour désactiver une cordure, tous les cadres adjacents doivent être paramétrés à Non (ou paramétrés à Par défaut, avec le jeu de cadres parent paramétré à Non). Couleur de bordure définit une couleur de bordure pour toutes les cordures adjacentes au cadre courant.

  Pour définir des cordures de jeu de cadres :

  1 Sélectionnez le jeu de cadres en cliquant sur la cordure d'un cadre dans la fenêtre de document, ou cliquez sur la cordure qui entoure les cadres dans l'inspecteur de cadres. 2 Définissez les options suivantes : Bordures contrôle la cordure des cadres compris dans le jeu de cadres courant. Choisissez Oui pour afficher les cordures en 3D et en couleur,CHOISISSEZ Non pour les afficher en 2D et grises, ou choisissez Par défaut pour laisser le navigateur déterminer leur affichage. La valeur par défaut de la plupart des navigateurs est Oui. Couleur de cordure définit une couleur de cordure pour toutes les cordures dans le jeu de cadres courant. Ce paramètre peut être remplaced par une couleur de cordure spécifique pour un cadre particulier. Larg. de cordure spécifique la largeur des cordures du jeu de cadres courant. Entrez 0 pour spécifique aucune cordure.

  Modification de la couleur d'arrière-plan d'un cadre

  Vous modifiez la couleur d'arriere-plan d'un cadre en définissant la couleur d'arriere-plan du document dans le cadre.

  Pour changer la couleur d'arriere-plan d'un document dans un cadre :

  1 Effectuez l'une des opérations suivantes : Placez le curseur dans le cadre et choisissez Modifier > Propriétés de la page. - Cliquez dans le cadre avec le bouton droit de la souris (Windows), ou en Maintenant la touche Contrôle enfoncée (Macintosh), puis désissez Propriétés de la page à partir du menu contextualuel. 2 Cliquez dans la zone de couleurs d'arriere-plan pour selectionner une couleur.

  Contrôle du contentu d'un cadre au moyen de liens

  Utilizez un lien dans un cadre pour modifier le contenu d'un autre cadre.

  Pour creer un lien qui modifie le contenu d'un autre cadre :

  1 Cliquez sur un cadre tout en appuyant sur Alt (Windows) ou sur Option (Macintosh) pour leLECTIONner. 2 Nommez le cadre en entrant un nom dans le champ Cadre de l'inspecteur des propriétés. 3 Repétez les étapes 1 et 2 pour chaque cadre dans le jeu de cadres. 4 Sélectionnez du texte ou un objet, puis entrez le fjichier auquel vous pouze le lier, dans la boîte Lien de l'inspecteur de propriétés. Pour spécifique un ancre dans l'autre fichier, entrez un signe dièse (#) avant le nom de l'ancre. Voir Établissement d'un lien vers une ancre nommée, page 111. 5 Cliquez sur la flèche d'agrandissement dans le coin inférieur droit de l'inspecteur de propriétés, puis désissez le nom du cadre cible à partir du menu contextualuel Cible.

  Création de contenu sans cadre

  Dreamweaver you permit de spécifier le contentu a afficher dans les ancients navigateurs et ceux basés-texte qui ne prenent pas en charge les cadres. Dreamweaver insere le contentu que you spécifie dans le fichier de jeu de cadre au moyen d'une instruction similaire à ceci : &lt;bodybgcolor "#FFFFFF"&gt; Ceci est le contenu sans cadre. &lt;/body&gt; Lorsqu'un navigateur ne supportant pas les cadres charge le fichier de jeu de cadres, il n'affiche que le contenu sans cadre NOFRAMES.

  Pour définit un contente NOFRAMES :

  1 Choisissez Modifier > Jeu de cadres > Éditer le contenu sans cadres. Dreamweaver efface la fenêtre de document, et les mots "Contenu sans cadre" apparaisent en haut du corps. 2 Creer le contenu sans cadre dans la fenetre de document. 3 Choisissez Modifier > Jeu de cadres > Éditer le contenu sans cadres de nouveau pour revenir à l'affichage normal du document de jeu de cadres.

  CHAPITRE 14

  Creation de formulaires

  Création de formulaires - Vue d'ensemble

  Les formulaires vous permettent de recueillir des informations sur les utilisateurs. Les utilisations courantes comprend les enquêtes, les bons de commande et les interfaces de recherche. Pour le fonctionnement des formulaires, deux éléments sont requis : le code HTML dérivant le formulaire et, soit une application côté serveur, soit un script côté client pourTRAiter les informations que l'utilisateur entre dans les champs du formulaire. Vous pouvez utiliser Dreamweaver pour creer des formulaires, leur ajouter des objets et pour valider (à l'aide des comportements) les informations entrées par l'utilisateur. Vous devez utiliser un éditeur de texte pour écrire un script, ou une application pourTRAITER les données du modeleur, (Perl est le langage de script le plus commun pour le traitement des formulaires ; C, Java et même JavaScript sont aussi des options). Vos formulaires Dreamweaver peuvent inclure des objets standard, tels que des champs de texte, des boutons, des champes d'image, des cases à cocher, des boutons radio, des listes ou des menus, des champes de fichier et des champes masqués. Dreamweaver prend également en charge les types d'entrée qu'il ne reconnaît pas, en affichtant les propriétés des champes génériques dans l'inspecteur de propriétés. Voir Propriétés des champes génériques dans les pages d'aide de Dreamweaver.

  Création d'un-formulaire

  Utilisez soit la commande Insertion > Formulaire, soit le volet Formulaire de la palette d'objets pour creer un formulaire.

  Pour creer un formaleur

  1 Effectuez l'une des opérations suivantes : - Placez le curseur à l'endetroit où vous souhaitez que le formulaire apparaissé et désisissez Insertion > Formulaire. - Placez le curseur à l'endetroit où vous souhaitez que le formulaire apparaissé et cliquez sur le bouton Insérer un formulaire dans le volet Formulaire de la palette d'objects. - Faites glisser le bouton d'insertion de formulaire vers l'emplacement désiré sur la page. S'il n'y a peuon résultat visible, vérifie bien que l'option Affichage > Éléments invisibles est activée. 2 Sélectionnez le formulaire et définissez ses propriétés dans l'Inspecteur. Choisissez une des options suivantes : Le champ Formulaire attribue un nom au formulaire. Ceci permet de le contrôle à l'aide d'un langage de script, tel JavaScript ou VBScript. Le champ Action identifie l'application cote serveur quiTRAITE les informations du formulaire, specifiée en tant qu'URL. Entrez le chemin de l'application ou cliquez sur Iicone de dossier pour trouver le fichier. Le menu Méthode définit la façon dont les données sont traitées. 3 Dans l'inspecteur des propriétés,CHOISSEZ L'une des méthodes suivantes pour définir la façon dont les données sont traitées : La méthode GET (acquérir) ajoute des valeurs de formulaire à l'URL et envoie une instruction GET au serveur. Les URL étant limitées à 8192 caractères, n'utilise pas cette méthode pour les longs formulaires. La méthode POST (poster) envoie les valeurs du formulaire dans le corps du message, puis envoie une instruction POST au serveur. La valeur par défaut est la méthode de valeur par défaut du navigateur (généralement GET).

  Ajout d'un objet à un-formulaire

  Une fois que vous avez ajoute un objet à un-formulaire, vous pouvez définir ses propriétés à l'aide de l'Inspecteur des propriétés.

  Pourajouterunobjet un formulaire：

  1 Effectuez l'une des opérations suivantes : - Placez le curseur à l'intérieur de la limite du formulaire etCHOisissez un objet à partir du menu Insertion > Objet de formulaire. - Placez le curseur à l'intérieur du formulaire et cliquez sur un bouton d'objet dans le volet Formulaires de la palette Objects. - Faites glisser un bouton d'objet vers l'emplacement désire à l'intérieur du formulaire. 2 Spécifiez les propriétés de l'objet dans l'inspecteur des propriétés, (choisissez Fenêtre > Propriétés pour afficher l'inspecteur des propriétés s'il n'est pas déjà ouvert). Les champes de texte acceptent tout type de texte, alphabetique ou numérique. Le texte saisi peut être affiché comme une ou plusieurs lignes, ou sous la forme d'astérisques ou de puce (pour la protection des mots de passer). Voir Propriétés du champ de texte dans les pages d'aide de Dreamweaver. Les boutons exécutent des tâches standard, telles que l'envoi ou la réinitialisation des formulaires, ou des fonctions personalisées. Vous pouvez saisir une étiquette personalisée pour un bouton ou utiliser l'une des étiquettes prédéfinitions. Voir Propriétés de bouton dans les pages d'aide de Dreamweaver. Les champions d'image peuvent être utilisés à la place des boutons d'envoi. Voir Propriétés du champ d'image dans les pages d'aide de Dreamweaver. Les cases à cocher acceptent plusieurs réponses au sein d'un seul groupe d'options. Voir Propriétés de case à cocher dans les pages d'aide de Dreamweaver. Les boutons radio représentent des可以选择 exclusifs. La sélection d'un bouton à l'intérieur d'un groupe entraîne la déslection de tous les autres. Voir Propriétés des boutons radio dans les pages d'aide de Dreamweaver. Les menus de liste contiennent une liste des valeurs parmi lesquilles les utilisateurs peuventCHOISIR. L'objet peut se presenter sous la forme d'un menucontextuel, dans lequel les valeurs de la liste apparaissent uniquement lorsquevous cliquez dessus (pour une reponse unique), ou sous la forme d'une zone deliste affichant always les valeurs dans une liste déroulante (pour plusieursréponses). Voir Propriétés de liste/menu dans les pages d'aide de Dreamweaver. Les champs de fichier permettent aux utilisateurs de parcourir les fichiers sur leurs disques durs et de les télécharger comme des données de formulaire. Voir Propriétés du champ Fichier dans les pages d'aide de Dreamweaver. Les champions masqués vous permettent de stocker des informations, (telles que le destinataire des données du formulaire ou le sujet du formulaire) qui ne sont pas destinées à l'utiliser, mais qui seront utilisées par l'application quiTRAITE le formulaire. Voir Propriétés du champ masqué dans les pages d'aide de Dreamweaver. 3 Entrez une étiquette ou un texte descriptif, si désiré, à côté de l'objet. Vouss pouvezmettre en forme le texte desétiquettes d'objects de formulaire. Pour plusde détails,voir Modificationdes caractéristiquesde la police dans les pages d'aide de Dreamweaver.

  Traitement des formulaires

  Les formulaires sont traités par le script ou par l'application spécifique dans l'attribut ACTION de la balise FORM. Sélectionnez un formulaire et observe l'inspecteur de propriétés pour voir qu'elle est l'action associée. Les formulaires les plus simples utilisent JavaScript ou VBScript pourTRAitter les données du formulaire cote client (par opposition à l'envoi des données du formulaire au serveur pour qu'elles soient traitées). Par exemple, un petit formulaire en bas de la page pourrait contir deux boutons radio intitulés Oui et Non, plus un bouton Envoyer. L'action du formulaire pourrait être une fonction JavaScript définie dans la partie HEAD du document, qui passerait à tel ou tel document selon que l'utilisateur selectionne Oui ou Non : function processForm(){ if (document.forms[0].elements[0].checked){ window.location.href = "réponseOui.html"; }else{ window.location.href = "réponseNon.html"; } }

  Pour utiliser une fonction JavaScript côté client comme action du formulaire :

  1 Sélectionnez un-formulaire. 2 Dans l'inspecteur de propriétés, tapez javascript: suivi du nom de la fonction dans le champ Action: par exemple, javascript(processForm(). Ne placez pas d'espace entre les deux points et le nom de la fonction. Vous pouvez exécuter de nombreuses tâches de traitement de-formulaire à l'aide du script côté client, mais vous ne pouvez pas enregistrer les données entrées par l'utilisateur ni les envoyer à quelqu'un d'autre. Pour les envoyer, vous avez besoin d'une application côté client telle que le script Common Gateway Interface (CGI). Les scripts CGI peuvent être écrites avec le langage Perl, C, Java ou un autre langage de programmation. Plusieurs sites du web offrent des scripts CGI que vous pouvez utiliser tels quels ou modifier selon vos besoins. Voir Ressources HTML des pages d'aide de Dreamweaver. Vous pouvez aussi demander à votre fournisseur d'accès à Internet ou à votre réseau web si des scripts CGI sont déjà configurés pour être exécutés sur le serveur que vous utilisez.

  CHAPITRE 15

  Réutilisation des éléments d'une page

  Réutilisation des éléments d'une page - Vue d'ensemble

  Pour la plupart des sites web, le contenu apparaît sur chaque page du site, (tel qu'un en-été ou un bas de page) ou seulement sur quelques pages devant être souvent mises à jour (telles que les gros titres ou les soldes). Dreamweaver propose deux fonctions de proceeder avec le contenu répétitif afin que vous n'ayez pas à le modifier sur chaque page du site : - Les éléments de la bibliothèque sont garantis sur tous les sites et devraient toujours être utilisés pour les sites qui seront consultés localement. Voir Utilisation des éléments de la bibliothèque, page 248. - Les instructions d'insertion côté serveur ne peuvent être utilisées que pour les sites affichés à partir d'un serveur, et seulement pour les serveurs configurés pourtraiter ces instructions (demandez à l'administrateur de votre système ou à votre webmaster si vous n'êtes pas sur que votre serveur web accepte les instructions d'insertion côté serveur). Voir Utilisation des insertions côté serveur, page 253.

  Utilisation des éléments de la bibliothèque

  Utilisez les éléments de la bibliothèque pour le contenu qui apparait sur plusieurs pages de votre site et pour le contenu qui doit souvent être mis à jour. Le placement d'un élément de la bibliothèque dans un document produit l'insertion d'une copie du code HTML dans le fichier et la création d'une référence à l'élement original externe. La référence à l'élement de bibliothèque externe rend possible la mise à jour du contenu d'un site entier en une seule fois, en modifiant l'élement de la bibliothèque et en utilisant les commandes de mise à jour du menu Modifier > Bibliothèque. Dreamweaver stocke les éléments de la bibliothèque dans un dossier Bibliothèque, à l'intérieur du dossier racine local de chaque site. Vous pouvez définir une bibliothèque différente pour chaque site (pour plus de détails sur le dossier racine local de chaque site, voir Création d'un site local, page 106).

  Creation d'un élément de bibliothèque

  Vou puez creer un élément de la bibliothèque à partir de n'importe qu'elle partie du corps d'un document. La partie que vous scélectionné est convertie par Dreamweaver en élément de la bibliothèque. Les éléments de la bibliothèque peuvent inclure n'importe quel élément BODY, y compris du texte, des tableaux, des formulaires, des images, des appliquettes Java, des plug-ins et des éléments ActiveX. Dreamweaver stocke seulement la référence aux éléments liés, tels que les images. Le fjichier d'origine doit rester à l'emplacement spécifique pour que l'élement de la bibliothèque fonctionne correctement. Les éléments de la bibliothèque peuvent aussiContainir des comportements, mais l'édition de ces comportements doit respecter certaines conditions. Voir Édition d'un comportement dans un élément de la bibliothèque, page 251. Les éléments de la bibliothèque ne peuvent pascontainir de scenario ni de feuilles de style, car le code de ces éléments fait partie de HEAD.

  Pour creer un element de bibliothèque :

  1 Sélectionnez une partie d'un document que vous souhaitez enregistrer comme élément de la bibliothèque. 2 Effectuez l'une des opérations suivantes : - Choisissez Fenêtre > Bibliothèque et faites glisser la sélection vers la palette Bibliothèque, ou cliquez sur le bouton Créer de la mêmepalette. Maintenez la touche Ctrl (Windows) ou Commande (Macintosh) enforcée pour éviter que la sélection soit remplaçaee par le nouvel élément de la bibliothèque. Choisissez Modifier > Ajouter objet à une bibliothèque. 3 Entrez un nom pour le nouvel élément de la bibliothèque.

  Configuration des préférences de la bibliothèque

  Vou puez personnaliser la couleur de surbrillance pour les éléments de la bibliothèque et afficher ou masquer cette couleur dans les préférences de surbrillance.

  Pour modifier la couleur de surbrillance de la bibliothèque :

  1 Choisissez Édition > Préférences, puis Sélectionnez Surbrillance. 2 Cliquez sur la case de couleur pour selectionner une couleur pour les éléments de la bibliothèque. 3 Sélectionnez Afficher pour faire basculer l'affichage de la couleur de surbrillance de la bibliothèque. Affichage > Éléments invisibles - cette option doit également être activée pour que la couleur de surbrillance de la bibliothèque soit visible dans la fenêtre Document. 4 Cliquez sur OK pour fermer la boite de dialogue Preférences.

  Ajout d'un élément de la bibliothèque à une page

  Lorsque vous ajoutez un élément de la bibliothèque à une page, le contenu réel est inséré dans le document avec une ↔équence à l'objet d'origine. Une fois le contenu inséré, l'objet original n'a pas besoin d'être présent pour que le contenu soit affchéé.

  Pour ajouter un élément de bibliothèque :

  1 Placez le curseur dans la fenetre Document. 2 Choisissez Fenetre > Bibliothèque ou cliquez sur le bouton Bibliothèque à partir du lanceur. 3 Faites glisser un élément de la palette de bibliothèque vers la fenêtre Document ou sélectionnez un élément et cliquez sur Ajouter à la page. Maintenez la touche Ctrl (Windows) ou Commande (Macintosh) enforcée pendant que vous faites glisser l'élément de la palette de bibliothèque afin d'insérer son contenu sans en creer une autre instance dans la palette.

  Modification d'un élément de la bibliothèque

  La modification d'un élément de la bibliothèque modifie son fichier d'origine. Dreamweaver vous laisse le choix d'actualiser l'élement modifié dans tous les documents du site en cours. Remarque: Lapalette de styles et l'inspecteur de scenario ne sont pas disponibles lorsqu'vous editedez les éléments de la bibliothèque car ceux-ci ne peuvent contérer que des éléments BODY. Le code du scenario et de la feuille de style fait partie de HEAD. De même, l'inspecteur de comportement n'est pas disponible car il insère du code dans HEAD comme dans BODY. Pour obtenir des instructions sur la façon d'éditer les comportements dans les éléments de la bibliothèque, voir Édition d'un comportement dans un élément de la bibliothèque, page 251.

  Pour modifier un élément de la bibliothèque :

  1 Choisissez Fenetre > Bibliothèque ou cliquez sur le bouton Bibliothèque à partir du lanceur. 2 Sélectionnez un élément de la bibliothèque et cliquez sur Ouvrir ou double-cliquez sur l'élément. Dreamweaver ouvre une nouvelle fenêtre pour la modification de l'objet de la bibliothèque. 3 Modifiez l'objet de la bibliothèque, puis enregistrez les modifications. 4 Dans la boîte de dialogue affichée, choisissez si vous souhaitezmettre à jour les documents du site local avec l'objet modifié ou non. Choisissez Oui pour une mise à jour de tous les documents dans le site local avec l'objet modifié. Choisissez Non si vous ne souhaitez modifier aucun document jusqu'à ce que vous utilisiez Modifier > Bibliothèque > Mettre à jour page en cours ou Mettre à jour les pages. La mise à jour d'un élément produit le remplacement de son contenu dans les documents où il est inclus.

  Pourmettreàjourunélementde labibliothèque：

  1 Choisissez Modifier > Bibliothèque > Mettre à jour page en cours. 2 Dans la boîte de dialogue qui apparait,CHOISISSEZ les fichiers que vous pouzemettre à jour. - Choisissez Site entier pourmettre à jour tous les documents du site spécifique. - Choisissez Fichiers qui utilisent pourmettre à jour tous les documents qui utilisent le modele spécifique. 3 Cliquez sur Demarrer. Le renommage d'un élément de la bibliothèque produit une coupure de la connexion entre les éléments créés sous l'ancien nom et l'élement renommé.

  Pour renomer un élément de la bibliothèque :

  1 Sélectionnez un élément de bibliothèque sur la palette de la bibliothèque. 2 Cliquez à l'intérieur du nom de l'objet. 3 Tapez un nouveau nom. La suppression d'un élément le supprime de la bibliothèque, mais ne modifie pas le contenu des documents.

  Pour supprimer un élément de bibliothèque :

  1 Choisissez Fenêtre > Bibliothèque ou cliquez sur le bouton Bibliothèque à partir du lanceur. 2 Sélectionnez un élément sur la palette de la bibliothèque. 3 Cliquez sur le bouton Supprimer ou appuyez sur la touche Suppr.

  Rendre les éléments de la bibliothèque modifiables

  Pour rendre un élément de la bibliothèque modifiable dans le document courant, vous doivent briser le lien entre l'élément du document et la bibliothèque. Une fois l'élément de la bibliothèque rendu modifiable, il ne peut pas être mis à jour à partir de la bibliothèque.

  Pour rendre un élément de la bibliothèque modifiable:

  1 Sélectionnez un élément de la bibliothèque dans le document courant. 2 Cliquez sur Rendre modifiable dans l'inspecteur des propriétés.

  Édition d'un comportement dans un élément de la bibliothèque

  Lorsque vous créez des éléments de bibliothèque auxquels sont attachés des comportements, Dreamweaver copie l'objet et son gestionnaire d'évenement (l'attribut qui spécifie l'évenement à rechercher et l'action à appeler lorsque cet événement se produit) dans le fischié de l'objet de la bibliothèque. Dreamweaver ne copie pas les fonctions JavaScript associées dans l'objet de la bibliothèque. Au lieu de cela, Dreamweaver insère automatiquement les fonctions dans HEAD du document courant (si elles n'y sont pas déjà) lorsque vous ajoutez l'objet de la bibliothèque au document. Les fonctions JavaScript ne sont pas stockées avec l'objet de la bibliothèque car ce sont des éléments HEAD, alors que les éléments de la bibliothèque ne peuvent containir que des éléments BODY. L'inspecteur de comportement n'est par consécutif pas disponible lorsque vous editez un élément de la bibliothèque, car seule la moitié du code de comportement est disponible pour l'inspection. Pour éoperator un comportement dans un élément de la bibliothèque, vous doivent rendre l'objet modifiable, puis le recréer après avoir effectué les modifications.

  Pour éoperator un comportement dans un élément de la bibliothèque :

  1 Ouvrez un document contenant l'objet de la bibliothèque. Notez le nom de l'objet de la bibliothèque, ainsi que les balises exactes qu'il contient. Ces informations vous seront nécessaires dans les étapes 8 et 9. 2 Sélectionnez l'objet de la bibliothèque et cliquez sur Rendre modifiable dans l'inspecteur de propriétés. 3 Sélectionnez l'élement auquel est attaché le comportement. 4 Choisissez Fenêtre > Comportements pour ouvrir l'inspecteur de comportement, puis double-cliquez sur l'action que vous pouze modifier. Pour supprimer entièrement une action, Sélectionnez-la et appuyez sur Supprimer. 5 Dans la boîte de dialogue des paramètres qui s'affiche, effectuez les modifications nécessaires et cliquez sur OK. 6 Choisissez Fenêtre > Bibliothèque pour ouvrir la palette de bibliothèque. 7 Supprimez l'élément original de la bibliothèque. 8 Dans la fenêtre Document, Sélectionnez les éléments qui constituent l'objet de la bibliothèque. Veillez à selectionner exactement les mêmes éléments que ceux qui se trouvaient dans l'objet original de la bibliothèque. 9 Dans lapalette de bibliothèque, cliquez sur le bouton Créer, puis donnez au nouvel élément le même nom que celui que vous avez supprimé dans l' étape 7. Veiliez à respecter la même orthographe et la même hauteur de casse. 10 Choisissez Modifier > Bibliothèque > Actualiser les pages. 11 Choisissez Fichiers qui utilisent à partir du menu contextualuel Rechercher dans. Le nom de l'objet de bibliothèque que vous venez de créé devrait apparaitre dans le menu contextualuel adjacent. 12 Sélectionnez l'option Mettre à jour les éléments de la bibliothèque et cliquez sur Demarrer.

  Configuration des propriétés des éléments de la bibliothèque

  Utilisez cette rubrique pour spécifier le fichier source d'un élément, pour le rendre modifiable ou pour le creator à nouveau après l'avoir modifié. Double-cliquez sur un élément pour ouvrir l'inspecteur des propriétés. Voir aussi Réutilisation des éléments d'une page - Vue d'ensemble, page 247. Src affiche le nom de fichier et l'emplacement du fichier source de l'element de la bibliothèque. Ouvrir Ouvre le fichier source de l'élément de la bibliothèque. Rendre modifiable brise le lien entre l'objet de bibliothèque sélectionné et son fichier source. Le contenu de l'objet de la bibliothèque devient modifiable, mais cette instance de l'objet ne pourrait plus être actualisée par les fonctions de mise à jour de la bibliothèque. Créer à nouveau remplace l'objet d'origine par la sélection en cours. Utilisez cette option pour creer à nouveau des éléments de bibliothèque en l'absence du fichier bibliothèque et après la modification de l'objet ou de son nom.

  Utilisation de la palette de bibliothèques

  Cette palette affiche tous les éléments qui se trouvent dans la bibliothèque courante, ainsi que les contrôles de bibliothèque listés ici. Pour ajouter des éléments à la page courante, faites-les glisser à partir de la liste directement vers la page, ou Sélectionnez-les et cliquez sur Ajouter à la page. Cliquez sur Ouvrir pour modifier l'objet. Voir aussi Réutilisation des éléments d'une page - Vue d'ensemble, page 247. Créer Ajoute la sélection en cours dans la fenêtre Document à la bibliothèque en tant que nouvel élément. Supprimer Supprime l'élément sélectionné de la bibliothèque. Ouvrir Ouvre l'objet selectionné dans une nouvelle fenêtre pour l'édition. Ajouter à la page Place l'objet de bibliothèque sélectionné dans la page, à l'emplacement du cursesr.

  Utilisation des insertions côte serveur

  Les instructions d'insertion cote serveur, comme leur nom l'indique, sont des instructions données au serveur pour insérer le fichier spécifique dans le document courant. Étant donné que le traitement de l'insertion à lieu sur le serveur, le contenu inclus n'apparait pas lorsque vous ouvrez un document locally dans un navigateur. il est toute fois visible si vous désissez Fichier > Aperçu dans le navigateur à partir de Dreamweaver; ceci est d'au fait que DreamweaverTRAITE les instructions d'insertion comme le ferait le serveur. Placer une instruction d'insertion côté serveur dans un document insère seulement une référence à un fjichier externe. Dreamweaver affiche le contenu du fjichier externe dans la fenêtre Document, facilitant ainsi la conception des pages, mais vous ne pouvez pas éoperator ce contenu directement dans un document. Toute modification apportée au fjichier externe est automatiquement reflétée dans chaque document où il est inclus.

  Pour procesder a une insertion cote serveur :

  1 Choisissez Insertion > Insertion côté serveur ou cliquez sur le bouton Proceder à une insertion côté serveur du panneau Invisibles de la palette d'objects. 2 Dans la boîte de dialogue qui s'affiche, entrez le chemin du fjichier que vous poulez inclure, ou cliquez sur l'icone de dossier pour rechercher et seLECTIONner le fjichier, puis cliquez sur OK.

  Affichage des insertions côté serveur dans Dreamweaver

  Par défaut, Dreamweaver traite toutes les insertions côté serveur non conditionnelles et les affiche dans la fenêtre Document.

  Pour modifier les fichiers qui sont traités ou pour désactiver le traitement des insertions côte serveur :

  1 Choisissez Édition > Préférences > Traduction. 2 Sélectionnez Insertions côté serveur à partir de la liste des traducteurs. 3 Sélectionnez l'une des options suivantes pour la traduction des instructions d'insertion côte serveur : La configuration par défaut est Dans tous les fischiers ; il n'y a aucune raison de modifier cette configuration, sauf si vous préférez ne pas voir le contenu des fischiers inclus affché dans la fenêtre Document. Dansaucunfichier-désactiveletraitementdesinstructionsd'insertioncotoe serveur dansDreamweaver. Dans les fichiers avec extension -Traits les instructions d'insertion cote serveur seulement dans les fichiers qui finissent par .stm, .htm, .htm, .htm ou .shtm. Dans les fichiers correspondant à l'une de ces expressions – recherche dans le document les correspondances aux expressions listées, et s'il y en a, les instructions d'insertion côté serveur sont traitées dans le document.

  Édition d'une insertion côte serveur

  De même que les éléments de la bibliothèque, les insertions côté serveur sont scélectionnées comme une entité dans la fenêtre Document. À la différence des éléments de la bibliothèque, l'HTML contenu dans une insertion n'apparait pas dans l'inspecteur d'HTML. L'instruction de serveur ressemble à ceci : Pour modifier le contenu associé au fichier inclus, vous devez ouvrir le fichier.

  Pour modifier une insertion côté serveur :

  1 Sélectionnez l'insertion côté serveur dans la fenêtre Document ou dans l'inspecteur HTML, puis cliquez sur Édition dans l'inspecteur de propriétés. Le fichier inclus s'ouvre dans une nouvelle fenêtre Document. 2 Modifiez, si nécessaire, le fjichier et enregistrrez. Les modifications sont immédiatement reflétées dans le document courant et dans tous les documents suivants que vous ouvre et qui incluent le fjichier.

  CHAPITRE 16

  Ajout d'interaktivité et d'animation

  Ajout d'interaktivité et d'animation – Vue d'ensemble

  Utilisez l'interaktivité et l'animation dans vos pages web pour donner un retour d'informations aux visiteurs lorsqu'ils se déplacent etclinquent, pour captiver leur curiosité, pourprésenter des concepts, pour valider des données de formulaire sans contacter le serveur - bref, pour que les visiteurs voient et essaient plus de choses sans quitter la page. Il existe plusieurs façon d'ajouter l'interaktivité et l'animation à vos pages à l'aide de Dreamweaver : Utilisez les comportements pour executer des tâches en réponse à des événements spécifique, tels la mise en surbrillance d'un bouton lorsque l'utilisateur passée dessus avec la souris, la validation d'un formulaire lorsque l'utilisateur clique sur le bouton Soumettre, ou l'ouverture d'une deuxième fenêtre de navigation une fois la page principale chargee. Voir Présentation des comportements, page 258. Utilisez les scenarios pour la création d'animations qui ne nécessitent pas de plug-in, de contrôle ActiveX, ou Java. Les scenarios utilisent le code HTML dynamique pour modifier la position d'un calque ou la source d'une image dans le temps ou pour entraîner des actions automatiques du comportement une fois la page chargeée. Voir Animation avec HTML dynamique, page 286. Utilisez les appliquettes Java, les animations Shockwave, Flash Player, ou tout autre contrôle ActiveX ou plug-in Netscape pour ajouter des animations autonomes, des modèles de navigation et d'autres éléments multimédia à votre page. Voir Ajout d'animations, d'appliquettes et d'autres éléments multimédia, page 296.

  Présentation des comportements

  Un comportement est la combinaison d'un événement et d'une action. Les actions sont des JavaScripts préécrits executant des tâches spécifiques, telles l'ouverture d'une fenêtre de navigateur, la lecture d'un son, ou encore l'arrêt d'une animation Shockwave. Les événements sont définis par le navigateur pour chaque éléments de page ; par exemple, onMouseOver, onMouseOut et onClick sont des événements associés à des liens dans la plupart des navigateurs, tandis que onLoad est un événement associé à des images et au corps du document. Lorsque vous attribuiez un comportement à un élément de page, vous spécifiez une action, ainsi que l'évenement qui la déclenché. Plusieurs actions peuvent être déclenchées par un seul événement et vous pouvez déterminer l'ordre dans lequel les actions survennent. Dreamweaver contient plusieurs actions de comportement ; vous pouvez en couver d'autres sur dans la section Extensibility Exchange du Centre de développement de Dreamweaver ainsi que sur d'autres sites de développpeurs. Voir T'échéancement et installation de comportements de tierce partie, page 262. Vous pouvez également écrire les yourselves si vous maitrises le langage JavaScript. Pour plus de détails sur l'écriture d'actions de comportement, consultez Extension de Dreamweaver - Vue d'ensemble dans les pages d'aide de Dreamweaver.

  Association d'un comportement

  Vous pouvez associier les comportements au document entier (BODY) ou à des liens, des images, des éléments de formulaire, ou à tout autre élément HTML. L'acceptation du comportement par les éléments dépend du navigateur. Internet Explorer 4.0, par exemple, dispose d'une collection d'événements pour chaque élément beaucoup plus importante que Netscape Navigator 4.0 ou tout navigateur 3.0. Vous pouvez attribuer plusieurs actions à un seul événement. Les actions survennent dans l'ordre listed. Pour plus de détails sur la modification de l'ordre des actions, voir Modification d'un comportement, page 260.

  Pour associer un comportement :

  1 Sélectionnéz un objet. Pour associier un comportement à l'ensemble de la page, cliquez sur la balise dans le sélection de balises situé au coin inférieur gauche de la fenêtre du document. 2 Choisissez Fenêtre > Comportements pour ouvrir l'inspecteur de comportements, ou cliquez sur le bouton Comportement du Lanceur. La balise HTML de l'objet sélectionné apparaît dans la barre de titre. 3 Cliquez sur le bouton + (signe plus) et effectuez unchioix parmi les actions du menu contextual. Les actions qui ne fonctionnent pas dans le document actuel ne sont pas disponibles dans le menu. Par exemple, l'action Lecture du scenario n'est pas disponible si le document ne contient pas de scenarios. Selon l'action可以选择, une boîte de dialogue apparaît affichtant les paramètres et les instructions pour l'action. 4 Saisissez les paramètres de l'action et choisissez OK. Toutes les actions proposées fonctionnent dans les navigateurs 4.0 ou plus récents. Certaines actions sont refusées pas les navigateurs moins récents. Voir Utilisation des comportements livrés avec Dreamweaver, page 263. 5 L'évenement par défaut de l'action apparait dans la colonne Événements. Selectionnez-en un autre à partir du menu contextuel Événements s'il ne s'agit pas de l'évenement youlu. Différentes événements apparaissent dans le menu contextuel Événements pour, selon l'objet sélectionné et le navigateur spécifique. Si les événements attendus ne s'affichent pas, vérifie que vous avez sélectionné l'objet correct, ou modifierez les navigateurs cibles dans le menu contextuel précité. Si vous associez un comportement à une image, les événements tels que onMouseOver et onMouseDown apparaissent entre parentheses. Ces événements sont seulement disponibles pour les liens. Lorsque vous en scélectionnez un, Dreamweaver entoure l'image d'une balise A pour définir le lien. Ne supprimez pas le signe dièse (#) qui apparait par la suite dans la zone Lien de l'inspecteur de propriétés, sinon vous supprimez le comportement. Cependant, vous pouvez remplacer ce signe par une nouvelle valeur de lien si vous le souhaitez.

  Modification d'un comportement

  Une fois le comportement associé, vous pouvez modifier l'évenement qui déclenché l'action, ajouter ou supprimer des actions et modifier les paramètres des actions.

  Pour modifier un comportement :

  1 Sélectionnez un objet associé à un comportement. 2 Choisissez Fenêtre > Comportements pour ouvrir l'inspecteur de comportements. Les comportements sont classés par ordre alphabetique, par l'évenement. S'il y a plusieurs actions pour le même événement, elles apparaissent dans l'ordre d'exécution. 3 Effectuez un choix parmi les options suivantes : Pour supprimer un comportement, selectionnez-le et cliquez sur le bouton (signe moins) ou appuyez sur Supprimer. Pour modifier les paramètres d'une action, double-cliquez sur le comportement (ou selectionnez-le et appuyez sur Entre), modifiez les paramètres dans la boîte de dialogue, puis cliquez sur OK. Pour modifier l'ordre d'apparition des actions d'un événement donné, seLECTIONnez le comportement et cliquez sur les touches de direction.

  Création de nouvelles actions

  Les actions sont des éléments JavaScript. Si vous étés un expert en JavaScript, vous pouze écrire de nouvelles actions et les faire apparaitre dans le menu contextual Actions de l'inspecteur de comportements. Consultez Extension de Dreamweaver -Vue d'ensemble dans les pages d'aide de Dreamweaver.

  Inspecteur de comportements

  Utilisez l'inspecteur de comportements pour associer des comportements JavaScript à des objets et pour modifier les paramètres de comportements déjà associés. Les comportements sont listed par ordre alphabetique de l'évenement. Si un seul événement dispose de plusieurs actions, ces dernières apparaissent dans l'ordre d'éjection. Les balises qui contrôlent la seLECTION en cours apparaissent en haut de l'inspecteur. Pour ouvrir l'inspecteur de comportements,CHOISSEZ Fenetre > Comportements ou cliquez sur le bouton Comportement du Lanceur. Voir aussi Présentation des comportements, page 258. (+) Affiche une liste d'actions qui peuvent se produit. La selection d'une action entraîne l'apparition d'une boîte de dialogue Paramètres. (-) Supprime l'action en cours de la liste Action. Événements pour Spécifie les navigateurs dans lesquels le comportement actuel devrait fonctionner. La sélection effectuée dans ce menu détermine quels événements apparaîtrent dans le menu contextual événements. Événements Affiche tous les événements qui peuvent déclencher l'action. Différentes événements s'affichent selon l'objet seLECTIONné. Si les événements désirés sont absents, vérifie que vous avez seLECTIONné l'objet correct. Utilisez le/selecteur de balise dans le coin inférieur gauche de la fenêtre Document pour seLECTIONner une balise spécifique. Remarque: Le menu contextual évenements apparait seulement lorsque vous avez sélectionné une action. Différentes navigateurs reconnaissent différents événements pour divers objets. Choisissez les navigateurs dans lesquels vous pouze que le comportement fonctionne à l'aide du menu contextuel Afficher les événements pour. Seuls les événements reconnus par les navigateurs selectionnés s'affichent dans le menu Événements. Flèches Haut et Bas Déplacent l'action sélectionnée vers le haut ou vers le bas dans la liste de comportements. Les actions sont executées dans l'ordre spécifique.

  Téléchargement et installation de comportements de pierce partie

  L'extensibilité de Dreamweaver est une de ces caractéristiques les plus intéressantes. En effet, elle offre aux utilisateurs experts en JavaScript la possibilité d'écritures propres objects, comportements, commandes, et inspecteurs de propriété. La plupart d'entre eux ont choisi de partager leurs efforts de développement en envoyant leurs fichiers sur la page Extensibility Exchange du site web de Dreamweaver (http://www.dreamweaver.com/). Les instructions pour le téléchargement de ces fichiers sont disponibles sur la page Extensibility Exchange.

  Pour installer le comportement d'un tiers pour utilisation avec votre copie de Dreamweaver :

  1 Utilisez un'utilitaire de dézippage pour extraire le ou les fichiers de comportement des archives télécharges. Par exemple, WinZip (Windows) ou ZipIt (Macintosh) ouvre les archives zip disponibles sur la page Extensibility Exchange. 2 Faites glisser les fichiers extrais vers le dossier Configuration/comportements/actions de l'application Dreamweaver. 3 Redemarrez Dreamweaver.

  Utilisation des comportements livrés avec Dreamweaver

  Les actions de comportement fournies avec Dreamweaver ont été écrites pour les navigateurs 4.0. Certaines d'entre elles sont refusées pas les navigateurs moins récents. Consultez le tableau suivant pour obtenir plus de détails sur le fonctionnement de ces actions selon le navigateur utilisé. Pour plus de détails sur le fonctionnement de chaque action et sur les choix d'options, consultez les rubriques ci-dessous.

  Action	Macintosh				Windows
  	Netscape 2.x	Netscape 3.x	Internet Explorer 3.0	Internet Explorer 3.01	Netscape 2.x	Netscape 3.x	Internet Explorer 3.0	Internet Explorer 3.01
  Appel Java-Script
  Modifica-tion de la propriété	OK; échoue sans erreur pour les objets des calques	OK; échoue sans erreur pour les objets des calques	Échoue sans erreur	OK	OK; échoue sans erreur pour les objets des calques	OK; échoue sans erreur pour les objets des calques	OK	OK
  Vérifica-tion du navigateur	OK	OK	OK	OK	OK	OK	OK	OK
  Vérifica-tion du plug-in	OK	OK	Échoue sans erreur	OK	OK	OK	OK	OK
  Contrôle Shockwave ou Flash	Échoue sans erreur	OK	Échoue sans erreur	Échoue sans erreur	Échoue sans erreur	OK	Échoue sans erreur	Échoue sans erreur
  Contrôle du son	Erreur	OK	Échoue sans erreur	Échoue sans erreur	Échoue sans erreur	OK	Échoue sans erreur	Échoue sans erreur
  Affichage du message d'etat	Échoue sans erreur	OK	Échoue sans erreur	OK	Échoue sans erreur	OK	OK	OK
  Déplace-ment du calque	Échoue sans erreur	Échoue sans erreur	Échoue sans erreur	Échoue sans erreur	Échoue sans erreur	Échoue sans erreur	Échoue sans erreur	Échoue sans erreur
  Atteindre l'URL	L'action Atteindre l'URL fon-c-tionne dans un cadre, mais échoue sans erreur dans une fenêtre principale si appliquée à un lien.	OK	Échoue sans erreur	OK	OK	OK	OK	OK
  Ouverture d'une fenetre de navigateur	Échoue sans erreur	OK	Échoue sans erreur	OK	OK	OK	OK	OK
  Message	OK	OK	Échoue sans erreur	OK	OK	OK	OK	OK
  Précharge-ment des images	Échoue sans erreur	OK	Échoue sans erreur	OK	Échoue sans erreur	OK	Échoue sans erreur	Échoue sans erreur
  Affichage-masquage des calques	Échoue sans erreur	Échoue sans erreur	Échoue sans erreur	Échoue sans erreur	Échoue sans erreur	Échoue sans erreur	Échoue sans erreur	Échoue sans erreur
  Interver-sion d'une image	Échoue sans erreur	OK	Échoue sans erreur	OK	Échoue sans erreur	OK	Échoue sans erreur	Échoue sans erreur
  Rétabillisse-ment d'une interver-sion d'images	Échoue sans erreur	OK	Échoue sans erreur	OK	Échoue sans erreur	OK	Échoue sans erreur	Échoue sans erreur
  Validation d'un formu-laire	Échoue sans erreur	OK	Échoue sans erreur	OK	Échoue sans erreur	OK	Échoue sans erreur	Échoue sans erreur
  Lecture et Arrêt d'un scenario Lecture et Arrêt d'un scenario Atteindre une image de scenario	Erreur	L'animation de l'image source et l'appel des comporte-ments fonction-nent, mais l'animation de calque a échoué sans erreur.	Échoue sans erreur	Échoue sans erreur	Erreur	L'animation de l'image source et l'appel des comporte-ments fonction-nent, mais l'animation de calque a échoué sans erreur.	Échoue sans erreur	Échoue sans erreur

  Appel JavaScript

  L'action Appel JavaScript vous permet d'utiliser l'inspecteur de comportements pour déterminer l'exécution d'une fonction ou d'une ligne personnalisée de code JavaScript lorsqu'un événement se produit.

  Pour utiliser l'action Appel JavaScript :

  1 Suívez les étapes 1 à 3 de la procédure dans Association d'un comportement, page 258. 2 Sélectionnez Appel JavaScript dans le menu contextual Actions. 3 Entrez le JavaScript à executer ou le nom d'une fonction. Par exemple, pour creer un bouton Retour vous pourriez saisir si (history.length > 0){history.back(). Si vous avez encapsulé votre code dans une fonction, entrez seulement le nom de la fonction (par exemple, goBack(). 4 Cliquez sur OK. 5 Vérifiez que l'évenement par défaut est celui que vous pouze. Si ce n'est pas le cas, selectionnez-en un autre dans le menu contextualuel. Si les événements désirés ne sont pas listedes, modifiez le navigateur cible dans le menu contextualuel Événements pour.

  Modification de la propriété

  Utilisez cette action pour modifier la valeur de l'une des propriétés d'un objet (par exemple, la couleur d'arrière-plan d'un calque ou l'action d'un formulaire). Le navigateur déterminé si les propriétés sont modifiables ou non ; beaucoup plus de propriétés sont exposées à JavaScript dans Microsoft Internet Explorer (IE) 4.0 que dans IE 3.0 ou Netscape Navigator 3.0 ou 4.0. Remarque: Nous vous conseillons d'utiliser cette action seulement si vous âtes expert en HTML et JavaScript.

  Pour utiliser l'action Modifier la propriété :

  1 Suivez les étapes 1 à 3 de la procédure dans Association d'un comportement, page 258. 2 Sélectionnez l'options Modifier la propriété dans le menu contextual Actions. 3 Sélectionnez le type d'objet dont vous souhaitez modifier la propriété dans le menu contextual Type d'objet. Lorsque vous choisissez un type d'objet, tous les objets nommés du type sélectionné s'affichent dans le menu contextual Objets nommés. 4 Sélectionnez-en un. 5 Sélectionnez ensuite une propriété à partir du menu contextual, ou entrez le nom de la propriété dans le champ texte. Choisissez différents navigateurs à partir du menu contextuel pour voir quelles propriétés peuvent être modifiées dans chacun d'entre eux. Si vous saisissez une propriété à la main, utilisez bien le nom JavaScript exact de la propriété (et souvent-vous que les propriétés JavaScript tiennent compte des majuscules/ minuscules). 6 Entre la nouvelle valeur de la propriété dans le champ Nouvelle valeur et cliquez sur OK. 7 Vérifiez que l'évenement par défaut est celui que vous voulez. Si ce n'est pas le cas, Sélectionnez-en un autre à partir du menu contextual. Si les événements désirés ne sont pas listedes, modifie le navigateur cible dans le menu contextual Événements pour.

  Vérification du navigateur

  Utilisez cette action pour envoyer les visiteurs sur des pages différentes selon l'éditeur et la version de leur navigateur. Par exemple, vous poulez que les utilisateurs de Netscape Navigator 4.0 ou version ultérieure aillent sur celle page, les utilisateurs de Microsoft Internet Explorer 4.0 ou version ultérieure aillent sur celle autre, ou s'ils disposent d'un另一种 type de navigateur, qu'ils restent sur la page en cours. Il est utile d'associer ce comportement à la balise BODY d'une page qui est compatible avec presque tous les navigateurs (et qui n'utilise pas d'autre JavaScript); ainsi, les visiteurs de la page qui ont désactivé JavaScript verront toujours quelles chose. Une autre option consiste à associer ce comportement à un lien sans destination (balise A) pour que l'action déterminé sur chaque page le lien renvoie selon l'éditeur et la version du navigateur du visiteur.

  Pour utiliser l'action Vérifier le navigateur :

  1 Suivez les étapes 1 à 3 de la procédure dans Association d'un comportement, page 258. 2 Sélectionnez Vérifier le navigateur dans le menu contextuel Actions. 3 Déterminez comment vous souhaitez désigner les visiteurs : par navigateur, par version, ou les deux. Par exemple, souhaitez-vous que ceux avec un navigator 4.0 voient telle page, et ceux avec une version différente en voient une autre? Ou ceux avec Netscape Navigator voient telle page, et ceux avec Microsoft Internet Explorer (IE) en voient une autre? Ou peut-être souhaitez-vous que les utilisateurs de Navigator 4.0 et IE 4.0 voient telle page, les utilisateurs de Navigator 2.0 ou 3.0 en voient une autre, et les utilisateurs d'IE 3.0 ou d'un autre navigator restent sur la page en cours. 4 Spécifiez une version de Netscape Navigator. 5 Dans les menus contextuels adjacents,CHOisissez les options au cas ou la version du navigateur est celle que vous avez spécifiée (ou plus recente), et dans le cas inverse. Les options sont Atteindre l'URL, Atteindre l'URL sec. et Rester sur cette page. 6 Spécifiez une version de Microsoft Internet Explorer. 7 Dans les menus contextuels adjacents,CHOISSEZ les options au cas ou la version du navigateur est celle que vous avez spécifiée (ou plus recente) et dans le cas inverse. Les options sont Atteindre l'URL, Atteindre l'URL sec. et Rester sur cette page. 8 Choisissez une option à partir du menu contextuel Autres navigateurs pour spécifique une action dans le cas où il ne s'agit ni de Netscape Navigator, ni de Microsoft Internet Explorer. La meilleure option est de rester sur la page en cours pour les navigateurs autres que Navigator et IE parce que la plupart ne prennt pas en charge JavaScript - et s'ils n'arrivent pas à dire ce comportement, ils resteront de toute façon sur cette page. 9 Entrez les chemins et les noms de fichier de l'URL et l'URL secondaire dans les champs texte au bas de la boîte de dialogue. 10 Cliquez sur OK. 11 Vérifiez que l'évenement par défaut est celui que vous voulez. Si ce n'est pas le cas, Sélectionnez-en un autre à partir du menu contextual. Si les événements désirs ne sont pas listedes, modifier le navigateur cible dans le menu contextual Événements pour. Souvenez-vous que le but de ce comportement est de vérifier les différentes versions du navigateur ; il est préféable alors d'opter pour un événement qui fonctionne avec les deux versions - 3.0 et 4.0 - du navigateur.

  Vérification du plug-in

  Utilisez cette action pour envoyer les visiteurs sur des pages différentes selon le plug-in installé. Par exemple, vous souhaitez peut-être envoyer les utilisateurs sur telte page s'ils ont Shockwave et sur telle autre s'ils ne l'ont pas. Remarque: Il est impossible de détecter des plug-in spécifiques sur Microsoft Internet Explorer (IE) à l'aide de JavaScript ; cependant, pour les plug-in accompagnés de commandes ActiveX (tels Shockwave et Flash), la vérification d'un plug-in est inutil si vous avez utilisé les deux balises OBJECT et EMBED pour inclure votre contenu dans la page. Dans ce cas, Sélectionnez l'option Atteindre le premier URL si ActiveX est disponible. Désélectionnez cette option si vous n'utilisçez pas la balise OBJECT ou si le plug-in n'est pas ajusté d'une commande ActiveX.

  Pour utiliser l'action Vérifier le plug-in :

  1 Suivez les étapes 1 à 3 de la procédure dans Association d'un comportement, page 258. 2 Sélectionnez Vérifier le plug-in dans le menu contextual Actions. 3 Sélectionnez un plug-in à partir du menu contextuel Plug-in, ou cliquez sur Entrée et saisissez le nom exact du plug-in dans le champ adjacent. Vou devez utiliser le nom exact du plug-in, tel qu'il a eté spécifique en gras sur la page À propos des plug-in dans Netscape Navigator (à partir de Navigator,CHOISSEZ ? >À propos des plug-in sous Windows ou Menu Pomme >À propos des plug-in sur Macintosh). 4 Spécífiez un URL pour les utilisateurs qui ont le plug-in dans le champ URL. Pour que les utilisateurs avec plug-in restent sur la même page, laissez le champ URL vide. 5 Spécifiez un URL secondaire pour ceux qui n'ont pas de plug-in dans le champ URL sec. Pour que les utilisateurs sans plug-in restent sur la même page, laissez le champ URL sec. vide. 6 Sélectionnez l'option Atteindre le premier URL si ActiveX est disponible lorsque vous utilise les deux balises OBJECT et EMBED. La balise OBJECT téléchargeant automatiquement la commande ActiveX si l'utilisateur n'en dispose pas encore, cette option permet d'aller à la page avec le contenu du plug-in. ActiveX est actuellément uniquement disponible sur Microsoft Internet Explorer pour Windows95/NT. 7 Cliquez sur OK. 8 Vérifiez que l'évenement par défaut est celui que vous voulez. Si ce n'est pas le cas, Sélectionnez-en un autre à partir du menu contextual. Si les événements désirés ne sont pas listedes, modifier le navigateur cible dans le menu contextual Événements pour.

  Contrôler Shockwave ou Flash

  Utilisez l'action Contrôler Shockwave ou Flash pour lire, arrêté, rembobiner ou atteindre une image dans une animation Shockwave ou Flash Player.

  Pour utiliser l'action Contrôler Shockwave ou Flash :

  1 Choisissez Insertion > Shockwave ou Insertion > Flash pour insérer une animation Shockwave ou Flash Player, respectivement. 2 Choisissez Fenêtre > Propriétés et entreprises un nom pour l'animation dans le champ saisie de texte à l'extreme gauche. Vous doivent donner un nom à l'animation avant de pouvoir lui associier l'action Contrôler Shockwave ou Flash. 3 Suívez les étapes 1 à 3 de la procédure dans Association d'un comportement, page 258. 4 Sélectionnez Contrôler Shockwave ou Flash dans le menu contextuel Actions. 5 Sélectionnez une animation dans le menu contextuel Object Shockwave. Dreamweaver affiche automatiquement tous les fichiers qui se terminent par .dcr, .dir, .swf, ou .spl et qui se trouvent dans des balises OBJECT ou EMBED du document en cours. 6 Sélectionnez lire, arrêté, rembobiner, ou atteindre une image dans l'animation. L'option Lire jouera l'animation à partir du cadre en cours. 7 Cliquez sur OK. 8 Verifie que l'évenement par défaut est celui que vous voulez. Si ce n'est pas le cas, Sélectionnez-en un autre à partir du menu contextual. Si les événements désirés ne sont pas listedes, modifier le navigateur cible dans le menu contextual Événements pour.

  Contrôle du son

  Utilisez cette action pour生存 ou arrêté un son. Par exemple, vous souhaitez peut-êtremettre en place un effet sonore à chaque fois que l'utilisateur passe au-dessus d'un lien, ou jour une série musicale lorsque la page est en train de charger et permettre à l'utilisateur d'arrêté la musique en cliquant sur un bouton. Remarque: Certains navigateurs nécessitent le plug-in LiveAudio ou équivalent pour la lecture dessons.

  Pour utiliser l'action Contrôler le son :

  1 Suívez les étapes 1 à 3 de la procédure dans Association d'un comportement, page 258. 2 Sélectionnez Contrôler le son dans le menu contextuel Actions. 3 Effectuez l'une des opérations suivantes : Pour utiliser l'action de lecture d'un son, entrez le chemin et le nom d'un fichier son dans le champ Jouer un son, ou cliquez sur le bouton Parcourir pour en selectionner un. Pour utiliser l'action d'arrêt de la lecture d'un son, Sélectionnez l'action Arrêté le son, puis désissez un fichier son à partir du menu contextual adjacent. 4 Cliquez sur OK. 5 Vérifiez que l'évenement par défaut est celui que vous pouze. Si ce n'est pas le cas, Sélectionnez-en un autre à partir du menu contextual. Si les événements désirés ne sont pas listedes, modifie le navigateur cible dans le menu contextual Événements pour.

  Affichage du message d'etat

  L'action Afficher le message d'etat montre un message dans la barre d'etat en bas de la fenetre du navigateur. Par exemple, vous pouvez utiliser cette action pour déscrie la destination d'un lien dans la barre d'etat au lieu d'afficher l'URL associé. Passez votre souris sur n'importequel bouton de navigation dans les pages de l'aide de Dreamweaver pour obtenir un exemple de message d'etat.

  Pour utiliser l'action Afficher le message d'etat :

  1 Suívez les étapes 1 à 3 de la procédure dans Association d'un comportement, page 258. 2 Sélectionnez Afficher le message d'etat dans le menu contextual Actions. 3 Entrez votre message dans le champ Message. Le champ est volontairement petit pour vous rappeler d'entrée un message le plus court possible. Le message sera tronqué par le navigateur s'il dépasse la barre d'etat. 4 Cliquez sur OK. 5 Verifiez que I'évenement par défaut est celui que vous voulez. Si ce n'est pas le cas, selectionnez-en un autre a partir du menu contextual. Si les événements désirés ne sont pas listedes, modifier le navigateur cible dans le menu contextual Événements pour.

  Déplacement du calque

  Cette action permet à l'utilisateur de déplacer un calque. Utilisez-la pour créé des puzzles, des commandes de défilingement, et d'autres éléments d'interface utilisateur mobiles. Vou puez specifier dans quelle direction l'utiliseur peut faire glisser le calque (horizontalement, verticalement, ou toute autre direction), la cible vers laquelle l'utiliseur devrait faire glisser le calque, si ce dernier doit etre aligné sur la cible ou non lorsqu'il arrive a moins d'un certain nombre de pixels de la cible, l'action a déclencher lorsque le calque touche la cible, etc. Puisque l'action Déplacer le calque doit être appelée avant que le calque puisse être déplaced par l'utilisateur, vérifie bien que l'évenement déclenchant l'action arrive avant que l'utilisateuressaie de faire glisser le calque. Nous vous conseillons d'associer cette action à l'objet BODY (à l'aide de l'évenement onLoad), bien que vous puissiez également l'associer à un lien replissant le calque entièrement (tel qu'un lien autour d'une image) à l'aide de l'évenement onMouseOver.

  Pour utiliser l'action Déplacer le calque :

  1 Choisissez Insertion > Calque ou cliquez sur le bouton Calque de la palette d'objet et dessinez un calque dans la fenetre Document. 2 Suívez les étapes 1 à 3 de la procédure dans Association d'un comportement, page 258. 3 Sélectionnez Déplacer le calque dans le menu contextuel Actions. Lorsque cette action n'est pas disponible, vous avez probablement selectionné un calque. Étant donné que les calques ne prennt pas en compte les événements dans les deux navigateurs de version 4.0, vous vedez selectionner un objet différent — tel que la balise BODY, un lien (balise A) —, ou remplacez le navigateur cible par IE 4.0 dans le menu contextualé Événements pour. 4 Sélectionnez le calque que vous poulez rendre mobile dans le menu contextuel Calque. 5 Sélectionnez soit Contraint, soit Libre dans le menu contextual Mouvement. Un mouvement Libre convient bien aux puzzles et aux autres produits nécessitant du glisser-deplacer. Pour les commandes de défilament et les paysages mobiles tels que les armoires de classement, les ridesaux et les mini-stores,CHOISSEZ un mouvement Contraint. 6 Pour le mouvement Contraint, saisissez des valeurs (exprimées en pixels) dans les champs Haut, Bas, Gauche, et Droite. Les valeurs sont relatives à la position de départ du calque. Pour contraindre un mouvement à l'intérieur d'une zone rectangulaire, entrez des valeurs positives dans les quatre champs. Pour permettre uniquement un mouvement vertical, entrez des valeurs pour Haut et Bas, mais 0 pour Gauche et Droite. Pour permettre uniquement un mouvement horizontal, entrez des valeurs positives pour Gauche et Droite, mais 0 pour Haut et Bas. 7 Saisissez des valeurs (expressées en pixels) pour la cible dépôt dans les champs Gauche et Haut. La cible de dépôt est l'endroit auquel vous pouze que l'utilisateur fasse glisser le calque. Un calque est considéré comme ayant atteint la cible dépôt lorsque ses coordonnés gauche et haut correspondant aux valeurs raisées dans les champs Gauche et Haut. Les valeurs sont relatives à l'angle supérieur gauche de la fenêtre du navigateur. Cliquez sur Afficher la position actuelle pour replir automatiquement les champs avec la position actuelle du calque. 8 Saisissez une valeur (exprimée en pixels) dans le champ Aligner si à moins de pour déterminer de combien l'utilisateur doit se rapprocher de la cible dépôt avant que le calque s'aligne dessus. Les grandes valeurs facilitent le découverte de la cible dépôt par l'utilisateur. 9 Pour des puzzles simples et des manipulations de paysage, vous pouvez vous arreter ici. Pour définir la poignée de déplacement du calque, suivez bien son mouvement lors du déplacement, puis déclenchez une action lorsqu'elle est déposée, cliquez sur Options supplémentaires. 10 Pour spécifique qu'il faut cliquer sur une zone particulière du calque avant de pouvoir le déplacer,CHOISSEZ Zone à l'intérieur du calque dans le menu contextualuel Déplacer la poignée, puis entrez les coordonnés Gauche et Haut, ainsi que la Largeur et la Hauteur de la poignée de déplacement. Cette option est utile lorsquel image à l'intérieur du calque contient un élément invitant au déplacement, telle une barre de titre ou une poignée de tiroir. Ne définissez pas cette option lorsque vous voulez que l'utilisateur soit libre de cliquer n'importe où dans le calque pour le déplacer. 11 Choisissez parmi les options Pendant le déplacement suivantes, si vous le souhaitez : - Sélectionnez Placer le calque au premier plan si le calque doit être amné au sommet de l'ordre de superposition lors de son déplacement. En sélectionnant cette option, déterminez si vous voulez laisser le calque en haut ou si vous préférez rétablit sa position d'origine dans l'ordre de superposition du menu contextualuel. - Entrez un code JavaScript ou un nom de fonction (par exemple, monitorLayer()) dans le champ Appel JavaScript pour executer à plusieurs reprises le code ou la fonction pendant le déplacement du calque. Par exemple, vous souhaitez peut-être écrire une fonction surveillant les coordonnées des calques et affichtant des conseils comme « vous vous approchez » ou « vous étés très loin de la cible dépôt » dans un champ texte. Voir Recueil d'informations sur le calque mobile, page 274. 12 Entrez un code JavaScript ou un nom de fonction (par exemple, evaluateLayerPos()) dans le second champ Appel JavaScript pour executer à plusieurs reprises le code ou la fonction lorsque vous déposez le calque. Sélectionnez l'option Seulement si aligné si le JavaScript devrait être executé uniquement si le calque a atteint la cible dépôt. 13 Cliquez sur OK. 14 Verifiez que I'évenement par défaut est celui que vous voulez. Si ce n'est pas le cas, Sélectionnez-en un autre à partir du menu contextual. Si les événements désirés ne sont pas listedes, modifier le navigateur cible dans le menu contextual Événements pour. Souvenez-vous que les navigateurs 4.0, IE 4.0 et Netscape 4.0 sont les seules options appropriées, puisque les navigateurs 3.0 ne prennant pas en compte les calques. Remarque: Vous ne peuvent associer l'action Déplacer le calque à un objet avec l'évenement onMouseDown.

  Recueil d'informations sur le calque mobile

  Lorsque vous associez l'action Déplacer le calque à un object, Dreamweaver insère la fonction MM DragLayer() dans l'en-tête ou encore HEAD de votre document. En plus de l'enregistrement du calque en tant que mobile, cette fonction définit trois propriétés pour chaque calque mobile —MM_LEFTRIGHT, MM_UPDOWN, et MM_SNAPPED—que vous pouvez utiliser dans vos propres fonctions JavaScript pour déterminer la position horizontale, la position verticale actuelle du calque, et s'il a atteint la cible ou non. Par exemple, la fonction suivante affiche la valeur de la propriété MM_UPDOWN (la position verticale actuelle du calque) dans un champ formulaire appelé curPosField. (Les champs Formulaire seront à afficher des informations continuèlement mises à jour parce qu'ils sont dynamiques—c'est-à-dire, vous pouvez modifier leur contenu après que la page ait été chargee—aussi bien dans Netscape Navigator que dans Microsoft Internet Explorer.) fonction getPos(containingLayer,nestedLayer){ var layerRef = ((navigator.appName = 'Netscape'?document.layers[containingLayer].document.layers[nest edLayer].document.all[nestedLayer]); var curVertPos = layerRef.MM_UPDOWN; document.tracking.curPosField.value = curVertPos; } Au lieu d'afficher la valeur des propriétés MM_UPDOWN ou MM_LEFTRIGHT dans un champ formulaire, vous pourriez écrire une fonction qui affiche un message dans ce champ selon la distance qui reste à parcourir jusqu'à la cible, ou vous pourriez appeler une autre fonction pour afficher ou masquer un calque selon la valeur qu'il détient. La réaction à la valeur de MM_UPDOWN ou MM_LEFTRIGHT est seulement limitée par votre propre imagination et vos compétence en matière de JavaScripts. Il est particulièrement utile de bien dire la propriété MM_SNAPPED lorsque vous disposez de plusieurs calques sur une page, qui doivent tous atteindre leurs cibles avant que l'utilisteur puisse passer à la page ou la tâche suivante. Par exemple, vous pourriez écrire une fonction qui compte le nombre de calques qui ont une valeur MM_SNAPPED de TRUE et l'appeper à chaque fois qu'un calque est déposé. Lorsque le compte de calques alignés atteint le nombre désiré, vous pouvez envoyer l'utilisteur à la page suivante ou envoyer un message de félicitations. Si vous avez associé l'action Déplacer le calque à des liens places à l'intérieur de plusieurs calques à l'aide de l'évenement onMouseOver, vous devriez apporter une petite modification à la fonction MM_dragLayer() pour éviter que la propriété MM_SNAPPED d'un calque aligné repasse à FALSE lorsque l'on passé dessus avec la souris (cela peut arriver si vous avez utilisé l'action Déplacer le calque pour creator un Puzzle de photo, car l'utilisateur passera probablement sur des pieces alignées lors du positionnement des autres). La fonction MM_dragLayer() n'a pas été écrit dans le but d'eviter ce comportement car il est parfois désirable (par exemple, lorsque vous voulez étabrir plusieurs cibles pour un seul calque).

  Pour éviter le réenregistrement de calques alignés :

  1 Choisissez Édition > Rechercher. 2 Sélectionnez Source HTML dans le menu contextual Rechercher. 3 Saisissez (!curDrag) dans le champ texte adjacent. 4 Cliquez sur Rechercher suivant. Cliquez sur Oui lorsque Dreamweaver vous demande si vous poulez continuer la recherche depuis le début du document. Dreamweaver trouve l'instruction : if (!curDrag) return false ; 5 Fermez la boite de dialogue, puis modifiez l'instruction dans l'inspecteur HTML pour qu'elle affiche : if(!curDrag||curDrag.MM_SNAPPED ! = null)return false; Les deux barres verticales (||) signifient "ou", et curDrag est une variable représentant le calque qui a été enregistré comme mobile. En français cette instruction signifie "si curDrag n'est pas un objet, ou s'il a déjà une valeur MM_SNAPPED, ce n'est pas la peine d'executer le reste de la fonction".

  Atteindre l'URL

  Cette action ouvre une nouvelle page dans la fenêtre actuelle ou dans un cadre spécifique. Elle est particulièrement utile pour la modification du contenu de plusieurs cadres en ne cliquant qu'une seule fois.

  Pour utiliser l'action Atteindre l'URL :

  1 Suívez les étapes 1 à 3 de la procédure dans Association d'un comportement, page 258. 2 Sélectionnez Atteindre l'URL dans le menu contextuel Actions. 3 Choisissez une destination pour l'URL à partir de la liste Ouvrir dans. La liste de selection énumère automatiquement tous les noms des cadres qui se trouvent dans le jeu de cadres actuel, ainsi que dans la fenêtre principale. S'il n'y a pas de cadres, cette dernière reste la seule option. Remarque: Cette action peut produit des résultats inattendus si l'un des cadres porte le nom haut, vide, auto, ou parent. Les navigateurs confendent parfois ces noms avec les cibles réservées haut, vide, auto, et parent. 4 Entrez le chemin et le nom de fichier du document à ouvrir dans le champ URL, ou cliquez sur Parcourir pour selectionner un fichier. 5 Repétez les étapes 3 et 4 pour ouvrir des documents supplémentaires dans d'autres cadres. 6 Cliquez sur OK. 7 Vérifiez que l'évenement par défaut est celui que vous voulez. Si ce n'est pas le cas, Sélectionnez-en un autre à partir du menu contextual. Si les événements désirés ne sont pas listedes, modifier le navigateur cible dans le menu contextual Événements pour.

  Ouverture d'une fenêtre de navigateur

  Utilisez cette action pour ouvrir un URL dans une nouvelle fenêtre. Vous pouvez désigner les propriétés de la nouvelle fenêtre, y compris la taille, les attributs (si elle est redimensionnable, dispose d'une barre de menu ou non, etc.), ainsi que le nom. Lorsque vous ne spécifiez aucun attribut, elle s'ouvrira dans la taille et avec les attributs de la fenêtre qui l'a lancée. La spécification d'attributs désactive automatiquement tous ceux qui ne sont pas volontairement activés. Par exemple, si vous ne définisse pas d'attributs pour la fenêtre, elle peut s'ouvrir à 640 x 480 pixels et disposer d'une barre d'outils de navigation, d'emplacement, d'etat et de menu. Si vous précise la largeur à 640 et la hauteur à 480 sans autres specifications, la fenêtre ouvrira à 640 x 480 pixels et ne disposera de barre d'outils ni de navigation, ni d'emplacement, ni d'etat, ni de menu, ni de poignées de redimensionnement, ni de barre de défilament.

  Pour utiliser l'action Ouvrir la fenêtre du navigateur :

  1 Suívez les étapes 1 à 3 de la procédure dans Association d'un comportement, page 258. 2 Sélectionnez l'action dans le menu contextual Actions. 3 Entrez l'URL à afficher, ou cliquez sur Parcourir pour selectionner un fjchier. 4 Définissez l'une ou plusieurs des options suivantes : Largeur de fenêtre Spécifie la largeur de la fenêtre en pixels. Hauteur de fenêtre Spécifie la hauteur de la fenêtre en pixels. Barre d'outils Navigation Est constituee de la ligne de boutons navigateurs qui. compend Precedente, Suivante, Origine, et Actualiser. Barre d'outils Emplacement Est constituee de la ligne d'options navigateurs qui contient le champ d'emplacement. Barre d'etat Est la zone grise au bas de la fenêtre du navigateur dans laquelle apparaissent les messages (tels la durée de chargement restante et les URL associés à des liens). Barre de menu Est la zone de la fenêtre du navigateur (Windows) ou du Bureau (Macintosh) où apparaissent les menus comme Fichier, Édition, Affichage, Atteindre, et ?. Vous doivent définir cette option si vous poulez que les utilisateurs puissant naviguer à partir de la nouvelle fenêtre. Sinon, l'utilisteur ne pourra que fermer ou réduire la fenêtre (Windows) ou fermer ou quitter l'application (Macintosh) depuis la nouvelle fenêtre. Barre de défilament si nécessaire Spécifique si ou qui non des barres de défilament devraient apparaitre si le contenu dépasse la zone visible. Si vous ne définisse pas explicitement cette option, les barres de défilament n'apparaitront pas. Si l'option Poignées de redimensionnement est également désactivée, les utilisateurs n'ontaucen moyen de visualiser le contenu au-delà de la taille d'origine de la fenêtre. Poinées de redimensionnement Indiquent que l'utilisateur devrait pouvoir redimensionner la fenêtre, soit en faisant glisser l'angle inférieur droit de la fenêtre, soit en cliquant sur le bouton redimensionnement dans l'angle supérieur droit. Si cette option n'a pas eté définie explicitement, le bouton redimensionnement est indisponible, et l'angle inférieur droit non déplacable. Nom de fenêtre Est le nom de la nouvelle fenêtre. Il faut la nommer si vous poulez la cibler avec des liens ou la contrôle à l'aide de JavaScript. 5 Cliquez sur OK. 6 Vérifiez que l'évenement par défaut est celui que vous voulez. Si ce n'est pas le cas, Sélectionnez-en un autre à partir du menu contextual. Si les événements désirés ne sont pas listedes, modifier le navigateur cible dans le menu contextual Événements pour.

  Message

  Cette action fait apparaitre une boîte de dialogue alerte JavaScript avec le message que vous avons spécifique. Utilisez cette action plutôt pour fournir des informations à l'utilisateur que pour luiprésenter un besoin, parce que ces boîtes de dialogues ne disposent que d'un seul bouton (OK).

  Pour utiliser l'action Message :

  1 Suívez les étapes 1 à 3 de la procédure dans Association d'un comportement, page 258. 2 Sélectionnez l'option Message dans le menu contextuel Actions. 3 Entrez votre message dans le champ Message. 4 Cliquez sur OK. 5 Vérifiez que l'évenement par défaut est celui que vous voulez. Si ce n'est pas le cas, Sélectionnez-en un autre à partir du menu contextual. Si les événements désirés ne sont pas listedes, modifier le navigateur cible dans le menu contextual Événements pour.

  PréchargeMENT des images

  Cette action charge les images qui n'apparaissent pas immédiatement à la page (tel que les images échangées contre des scénarios, des comportements, ou JavaScript) dans l'antémémoire du navigateur. Cela évite des retardes dus au téléchargement lorsque les images doivent apparaitre. Remarque: L'action Intervertir une image précharge automatiquement toutes les images sélectionnées lorsque vous cochez l'option Précharger les images dans la boîte de dialogue Intervertir une image ; ainsi, il n'y a plus besoin d'utiliser cette option avec cette action.

  Pour utiliser l'action Précharger les images :

  1 Suivez les étapes 1 à 3 de la procédure dans Association d'un comportement, page 258. 2 Sélectionnez l'option Précharger les images dans le menu contextual Actions. 3 Entrez le chemin ou le nom de fichier d'une image à précharger dans le champ Fichier source d'image, ou cliquez sur Parcourir pour selectionner un fichier. 4 Cliquez sur le bouton + (signe plus) en haut de la boîte de dialogue pour ajouter l'image à la liste Précharger les images. Vous devez cliquer sur le bouton + (signe plus) avant d'entrez l'imague suivante, sinon l'imagne que vous venez de besoin sera remplacée par cette que choisisrez ensuite. 5 Repétez les étapes 3 et 4 pour les images restantes que vous pouze précharger dans la page en cours. 6 Pour supprimer une image de la liste Précharger les images, Sélectionnez-la et cliquez sur le bouton - (signe moins). 7 Cliquez sur OK. 8 Vérifiez que l'évenement par défaut est celui que vous pouze. Si ce n'est pas le cas, Sélectionnez-en un autre à partir du menu contextual. Si les événements désirés ne sont pas listedes, modifier le navigateur cible dans le menu contextual Événements pour.

  Affichage-masquage des calques

  Cette action affiche, masque, ou rétablit la visibilité par défaut d'un ou plusieurs calques. Elle sert à afficher des informations au fur et à mesure que l'utilisateur interagit avec la page. Par exemple, lorsque le curseur passse sur l'image d'une plante, vous pouvez afficher un calque offrant des détails sur les saisons et la région de la plante, la quantité de soleil dont elle a besoin, la taille qu'elle peut atteindre, etc.

  Pour utiliser l'action Afficher-masquer les calques :

  1 Choisissez Insertion > Calque ou cliquez sur le bouton Calque de la palette d'objets et dessinez un calque dans la fenetre Document. Répétez cette étape pour creer des calques supplémentaires. 2 Suívez les étapes 1 à 3 de la procédure dans Association d'un comportement, page 258. 3 Sélectionnez l'action Afficher-masquer les calques dans le menu contextuel Actions. Lorsque cette action est indisponible, vous avez probablement sélectionné un calque. Étant donné que les calques ne prennt pas en compte les événements dans les deux navigateurs de la version 4.0, vous devez selectionner un objet différent — tel que la balise BODY ou un lien (balise A) — ou remplacez le navigateur cible par IE 4.0 dans le menu contextual Evénements pour. 4 Sélectionnez le calque dont vous voulez modifier la visibilité dans la liste Calques nommés. 5 Cliquez sur Affichage pour afficher le calque, Masquage pour la masquer, ou Par Destruct pour rétablier la visibilité par défaut du calque. 6 Répétez les étapes 4 et 5 pour les calques restants dont vous pouze modifier la visibilité maintainant. 7 Cliquez sur OK. 8 Vérifiez que l'évenement par défaut est celui que vous pouze. Si ce n'est pas le cas, Sélectionnez-en un autre à partir du menu contextual. Si les événements désirés ne sont pas listedes, modifier le navigateur cible dans le menu contextual Événements pour. L'action Afficher-masquer les calques sert également à creer un calque de préchargement—c'est-à-dire, un grand calque cachant d'abord le contenu de la page, puis disparaisant à la fin du chargement de tous les éléments de la page.

  Pour creer un calque de prechargement :

  1 Cliquez sur le bouton Calque dans la palette d'objets, puis dessinez un grand calque dans la fenetre du document. Assurez-vous que le calque couvre bien tout le contenu de la page. 2 Dans lapalette Calque, faites glisser le nom du calque vers le haut de la liste afin de specifier qu'il doit s'afficher au premier plan de l'ordre de superposition. 3 Appelez le calque chargement dans le champ texte à l'extrème gauche de l'inspecteur de propriétés. 4 Tout en gardant le calque selectionné, mettez sa couleur d'arrière-plan à la même couleur que la page d'arrière-plan de l'inspecteur de propriétés.  5 Cliquez à l'intérieur du calque (qui devrait maintainant cacher le reste du contenu de la page) et entrez un message, si nécessaire. Par exemple, Veuillez patienter pendant le chargement de la page ou Chargement... sont des messages d'information pour éviter que l'utilisateur pense que la page est vide. 6 Cliquez sur la balise <body> dans le sélecteur de balises situé dans l'angle inférieur gauche de la fenêtre du document. 7 Dans l'inspecteurs de comportements, Sélectionnez Afficher-masquer les calques dans le menu contextual Actions. 8 Sélectionnez le calque appelé chargement à partir de la liste Calques nommés. 9 Cliquez sur Masquer. 10 Cliquez sur OK.

  Intervention d'une image

  Cette action échange une image contre une autre en modifiant l'attribut Src de la balise IMG. Utilisez-la pour creer des défilements sur bouton et d'autres effets d'image (y compris l'échange de plusieurs images à la fois). Remarque: Puisque seul l'attribut Src est affecté par cette action, vous devriez intervertir une image aux mêmes dimensions (hauteur et largeur) que l'original afin d'éviter des distorsions.

  Pour utiliser l'action Intervertir l'image :

  1 Choisissez Insertion > Image ou cliquez sur le bouton Image de la palette d'objects pour insérer une image. 2 Dans l'inspecteur de propriétés, entrez un nom pour l'image dans le champ texte à l'extreme gauche. L'action Intervertir l'image fonctionnera toujours si vous ne nommez pas vos images (des noms sont automatiquement attribués aux images sans nom lorsque vous associez le comportement à un objet), mais c'est plus facile de déterminer de chaque image il s'agit dans la boîte de dialogue Intervertir l'image si elles sont déjà toutes nomméesAAParavant. 3 Repétez les étapes 1 et 2 si vous souhaitez insérer des images supplémentaires. 4 Suivez les étapes 1 à 3 de la procédure dans Association d'un comportement, page 258. 5 Sélectionnez l'options Intervertir l'image dans le menu contextuel Actions. 6 Sélectionnez l'image dont vous voulez modifier la source dans la liste Images. 7 Entrez le chemin et le nom de filchier de la nouvelle image dans le champ Définir la source à, ou cliquez sur Parcourir pour selectionner un filchier d'images. 8 Repetez les étapes 6 et 7 pour la modification de toute image supplémentaire. 9 Sélectionnez l'option Précharger les images pour charger les nouvelles images dans l'antémémoire du navigateur. Cela évite des retards dus au téléchargement lorsque les images doivent apparaitre. 10 Cliquez sur OK. 11 Vérifiez que l'évenement par défaut est celui que vous voulez. Si ce n'est pas le cas, Sélectionnez-en un autre à partir du menu contextual. Si les événements désirés ne sont pas listedes, modifier le navigateur cible dans le menu contextual Événements pour.

  Rétablissement d'une intervention d/images

  Cette action rétablit la dernière série d'images intervencies à leurs fichiers source precedents. Elle est automatiquement ajoutée quand vous associez l'action Intervertir l'image à un objet ;vous ne devriez jamais la sélectionner manuellement.

  Validation d'un formulaire

  Cette action vérifie le content de champes texte spécifique pour assurer que l'utilisateur ait saisi le bon type de données. Associez cette action à des champes formulaire individuels avec l'évenement onBlur pour valider les champes au fur et à mesure que l'utilisateur remplit le formulaire, ou associez-la au formulaire avec l'évenement onSubmit pour évaluer divers champes à la fois lorsque l'utilisateur clique sur le bouton Soumettre. L'association de cette action à un formulaire évite l'envoi de ce dernier au serveur au cas où il contiendait des champes aux données non valides.

  Pour utiliser l'action Valider le formulaire :

  1 Choisissez Insertion > Formulaire ou cliquez sur le bouton Formulaire de la palette d'objects pour insérer un formulaire. 2 Choisissez Insertion > Objet de formulaire > Champ texte ou cliquez sur le bouton Champ texte sur la palette d'objet pour insérer un champ texte. Repeteze cette etape si vous souhaitez insérer des champs texte supplémentaires. 3 Effectuez l'une des opérations suivantes : Pour valider des champs individuels au fur et à mesure que l'utilisateur remplit le formulaire, sélectionnez un champ texte etCHOISSEZ Fenetre> Comportements. Pour valider des champs multiples lorsque l'utilisateur soumet le formulaire, cliquez sur la balise

  dans le selecteur de balises situé dans l'angle inférieur gauche de la fenêtre du document, puis désisisse Fenêtre > Comportements. 4 Sélectionnez Validator le formulaire dans le menu contextual Actions. 5 Effectuez l'une des opérations suivantes : Si vous validez des champs individuels, selectionnez le même champ que vous aviez selectionné dans la fenêtre du document à partir de la liste Champs nommés. Si vous validez des champs multiples, selectionnez un champ texte à partir de la liste Champs nommés. 6 Sélectionnez l'option Requis si le champ doit contérer des données. 7 Effectuez un besoin parmi les options suivantes : Utilisez l'option Tout si le champ est requis, mais ne doit pas contenir un type particulier de données. Si Requis n'a pas ete selectionne, cette option n'a aucun sens (c'est-à-dire, cela reviendrait au meme si l'action Valider le formulaire n'était pas associée au champ). Utilisez l'option Adresse e-mail pour vérifier que le champ contient le symbole @. Utilisez Chiffre pour vérifier que le champ ne contient que des caractères numériques. Utilisez Chiffre à partir de pour vérifier que le champ ne contient que des caractères numériques dans la plage prévue. 8 Si vous validez des champs multiples, repétez les étapes 6 et 7 pour tout champ supplémentaire que vous souhaitez valider. 9 Cliquez sur OK. Si vous validez des champs multiples au moment où l'utilisateur soumet le formulaire, alors l' événement on Submit apparait automatiquement dans le menu contextual évenements. 10 Si vous validez des champs individuels, vérifie bien que l'évenement par défaut est onBlur ou onChange. Sinon, selectionnez onBlur ou onChange dans le menu contextuel. Ces deux événements déclenchent l'action Valider le formulaire d's que l'utilisateur s'éloigne du champ. La différence entre ces deux est que onBlur est toujours exécuté, que l'utilisateur ait saisi le champ ou non, tandis que onChange n'est exécuté que si l'utilisateur a modifié le contenu du champ d'une façon ou d'une autre.onBlur est l'évenement préfééré lorsque vous avez précisé que le champ est obligatoire.

  Lecture et Arrêt d'un scenario

  Utilisez ces deux actions pour permettre aux utilisateurs de dire et d'arreter un scenario en cliquant sur un lien ou un bouton ; ou de demarrer et d'arreter un scenario automatiquelorsque l'utiliser passes sur un lien, une image, ou tout autre object. L'action Lire le scenario est automatique associée à la balise BODY avec l'évenement onLoad lorsque vous selectionnez l'options Lecture auto dans linspecteur de scenario.

  Pour utiliser les actions Lire le scenario et Arrête le scenario :

  1 Choisissez Fenètre > Scénario pour ouvrir l'inspecteur de scenario et vous assurer que votre document contient un scenario. Si vous ne VOYZ pas de barre d'animation violette dans l'inspecteur de scenario, votre document ne contient pas de scenario. Voir Creation d'une animation de scenario, page 288. 2 Suívez les étapes 1 à 3 de la procédure dans Association d'un comportement, page 258. 3 Sélectionnez Lire le scenario ou Arrête le scenario dans le menu contextual Actions. 4 Sélectionnez le scenario concerné, ouCHOISSEZ d'arrête tous les scénarios, dans le menu contextual. 5 Cliquez sur OK. 6 Vérifiez que l'évenement par défaut est celui que vous voulez. Si ce n'est pas le cas, Sélectionnez-en un autre à partir du menu contextual. Si les événements désirés ne sont pas listedes, modifier le navigateur cible dans le menu contextual Événements pour.

  Atteindre une image de scenario

  Cette action déplace la tête de lecture vers une image particulière. Vous pouvez l'utiliser dans le Canal de comportement de l'inspecteur de scenario pour rejouer des parties du scenario un certain nombre de fois (en boucle), pour creer un lien ou un bouton Rembobiner, ou pour permettre à l'utilisateur de se rendre à différentes parties de l'animation.

  Pour utiliser l'action Atteindre l'image de scenario :

  1 Choisissez Fenètre > Scénario pour ouvrir l'inspecteur de scenario et vous assurer que votre document contient un scenario. Si vous ne VOYZ pas de barre d'animation violette dans l'inspecteur de scenario, votre document ne contient pas de scenario. Voir Creation d'une animation de scenario, page 288. 2 Suívez les étapes 1 à 3 de la procédure dans Association d'un comportement, page 258. Pour associier un comportement à une image de scenario, cliquez sur l'image désirée dans le Canal de comportement. 3 Sélectionnez Atteindre l'image de scenario dans le menu contextual Actions. 4 Sélectionnez le scenario désiré dans le menu contextualuel Scénario. 5 Entrez un numero d'image dans le champ Atteindre l'image. 6 Si vous ajoutez cette action au Canal de comportement d'un scenario et que vous poulez que la partie du scenario entre Atteindre l'image et l'image actuelle soit jouée en boucle, entrez le nombre de fois que le segment doit être joué dans le champ Boucle. Ce champ doit rester vide si vous n'associez pas Atteindre l'image de scenario à une image de scenario. 7 Cliquez sur OK. 8 Verifie que l'évenement par défaut est celui que vous voulez. Si ce n'est pas le cas, Sélectionnez-en un autre à partir du menu contextual. Si les événements désirés ne sont pas listedes, modifier le navigateur cible dans le menu contextual Événements pour.

  Animation avec HTML dynamique

  HTML dynamique, ou DHTML, désrit la capacité de modifier le style ou les propriétés de positionnement à l'aide d'un langage de script. Le scenario employé HTML dynamique pour modifier les propriétés des calques et des images dans une série d'images dans le temps. Utilisez les scénarios pour créé des animations qui n' ont pas besoin de contrôle ActiveX, d'appliquette Java, ou de plug-in. Les scénarios créé une animation en modifient la position, la taille, la visibilité et l'ordre de superposition d'un calque dans le temps. Ils sont également utiles pour produit d'autres actions souhaitées après le chargement d'une page. Par exemple, les scénarios peuvent modifier le fjichier source d'une image, et elles peuvent exécuter des comportements à un moment donné. Les fonctions de scenario ne fonctionnement que dans des navigateurs de la version 4.0 ou ultérieurs. Ouvrez l'inspecteur HTML pour afficher le code JavaScript génére par le scenario. Le code du scenario se trouve dans la fonction MM_initTimelines, à l'intérieur d'une balise SCRIPT à la HEAD du document. Lorsque vous modifiez l'HTML d'un document contenant des scénarios, faites attention de ne pas déplacer, renomer ou supprimer des éléments auxquels le scenario fait reference.

  Utilisation de l'inspecteur de scenarios

  Cet inspecteur représenté les propriétés des calques et des images dans le temps. Choisissez Fenêtre > Scenarios pour l'ouvrir. Voir aussi Animation avec HTML dynamique, page 286. Cliquez du bouton droit de la souris (Windows) ou cliquez en maintainant la touche Contrôle enforcée (Macintosh) sur l'inspecteur de scénarios pour ouvrir un menu contextuel contenant toutes les commandes appropriées. Tête de lecture Montré qu'elle image du scenario est actuellément affichée sur la page.  Menu contextual Scenario Spécifie les scénarios du document qui sont affichés dans l'inspecteur de scénarios. Canaux d'animation Affiche les barres animant les calques et les images. Barres d'animation Montre la durée de chaque objet. Une seule ligne peut comprendre plusieurs barres représentant différents objets. Un objet dans une image donnée ne peut être contrôle par différentes barres. Images-clés Sont les images dans une barre où vous ave specifyé les propriétés (telle la position) de l'objet. Dreamweaver calcule les valeurs intermédiaires pour les images situées entre les images-clés. Les images-clés sont indiquées par les petits cercles. Canal de comportement Est le canal contenant les comportements qui devraient etre exécutés dans une image particulière du scenario.  Nombre d'images Indique le nombre d'images que chaque barre occupe. Le nombre entre les boutons Retour et Lecture indique l'image en cours. Vous pouvez contröler la durée de l'animation en déterminant le nombre total d'images et le nombre d'images par seconde (ips). La configuration par défaut de 15 images/sec est une bonne vitesse moyen pour la plupart des navigateurs qui sont exécutés sous des systèmes Windows et Macintosh commun. Des vitesses supérieures n'améliorent pasforcément la performance. Les navigateurs lisent toujours toutes les images de l'animation, même si elles ne peuvent atteindre la cadence spécifique par le système de l'utilisateur.  Remboser Déplace la tête de lecture vers le premier cadre du scenario. Retour Déplace la tête de lecture une image vers la gauche. Cliquez sur Retour en maintenant le bouton de la souris enforcé pour jouer le scenario in sens inverse. Lecture Déplace la tête de lecture une image vers la droite. Cliquez sur Lecture en maintenant le bouton de la souris enforcé pour jouer le scenario continulement. Lecture auto Entrainée la lecture automatique du scenario lors du chargement de la page en cours dans un navigateur. Lecture auto attache un comportement à la balise BODY de la page qui exécute l'action de lecture du scenario lors du chargement de la page. Boucle Entrainée la lecture en boucle infinie du scenario en cours lorsque la page est ouverte dans un navigateur. La lecture en boucle insère le comportement. Atteindre l'image de scenario dans le Canal de comportement après la dernière image de l'animation. Double-cliquez sur l'indicateur dans ce cadre pour modifier les paramètres de ce comportement et changez le nombre de boucles.

  Creation d'une animation de scenario

  Les scénarios créé une animation en modifier la position, la taille, la visibilité, et l'ordre de superposition des calques. Ils peuvent également modifier les fjichiers source des images. Les scénarios peuvent déplacer seulement des calques. Afin de déplacer des images ou du texte, créez un calque à l'aide de l'outil Calque sur la palette d'objets, puis insérez des images, du texte, et d'autres types de contenu dans le calque. Voir Création de calques, page 214.

  Pour creer une animation de scenario :

  1 Si vous voulez animer un calque, déplacez-le vers l'emplacement où il devrait se trouver au démarrage de l'animation. 2 Choisisse Fenetre > Scénarios, ou cliquez sur le bouton Scenario du lanceur. 3 Sélectionnez le calque ou l'image à animer. Assurez-vous d'avoir sélectionné l'élement souhaité. Cliquez sur l'indicateur de calque ou utilisez la palette de calques pour en sélectionner un. Voir aussi Manipulation des calques, page 220. Lorsqu'un calque est sélectionné, des poignées apparaisent (voir l'illustration suivante).  Lorsque vous cliquez sur le calque même, un curseur clignotant se place à l'intérieur du calque, mais cela n'entraîne pas la sélection du calque. 4 Choisissez Modifier > Ajouter objet à un scenario, ou faites glisser l'objet sélectionné dans l'inspecteur de scenarios. Une barre apparait dans le premier canal du scenario. Le nom du calque ou de l'image y sera affché. Si vous travailliez avec une image, la seule propriétémodifiable est son fjichier source dans l'inspecteur de propriétés. Les étapes suivantes ne s'appliquent pas. Voir Modification des propriétés d'une image et d'un calque à l'aide des scenarios, page 291. 5 Cliquez sur l'indicateur d'image-clé à la fin de la barre. 6 Déplacez le calque vers l'emplacement où il devrait se trouver à la fin de l'animation. 7 Si vous voulez que le calque se déplace en courbe, Sélectionné sa barre d'animation et appuyez sur la touche Contrôle enclinquant (Windows) ou la touche Commande enclinquant (Macintosh) pour ajouter une image-clé à la position du curseur, ou cliquez sur un cadre au milieu de la barre d'animation et choisissez Ajouter image-clé du menu contextual. Répétez cette étape pour définir des images-clés supplémentaires. 8 Maintenez le bouton Lecture enforcé pour avoir un aperçu de l'animation sur la page. Répétez la procédure pour ajouter des calques et des images supplémentaires au scenario et pour creer une animation plus complexe.

  Création d'un scenario en faisant glisser un chemin

  Si vous voulez创建工作 une animation avec un chemin complexe, c'est plus efficace d'enregistrer le chemin en faisant glisser le calque plutôt que de创建工作 des images-clés individuelles.

  Pour creer un scenario en faisant glisser un chemin :

  1 Choisissez Insertion > Calque pour creer un calque. 2 Déplacez le calque vers l'emplacement où il devrait se trouver au début de l'animation. Assurez-vous d'avoir sélectionné l'objet souhaité. Cliquez sur l'indicateur de calque ou utilisez la palette de calques pour en sélectionner un. Voir aussi Manipulation des calques, page 220. 3 Choisissez Modifier > Enregister le chemin du calque. 4 Faites le tour de la page avec le calque pour creer un chemin. 5 Relâchez la souris à l'emplacement où l'animation devrait s'arrêter. Dreamweaver ajoute une barre d'animation au scenario avec le nombre ajustat d'images-clés. 6 Dans l'inspecteur de scenario, cliquez sur le bouton Rembobiner ; puis maintenez le bouton Lecture enforcé pour visualiser votre animation.

  Modification de scenarios

  Après avoir défini les composants de base d'un scenario, vous pouvez effectuer des modifications utiles tel qu'ajouter et supprimer des images, changer l'heure de démarrage de l'animation, etc.

  Pour modifier un scenario, effectuez l'une des opérations suivantes :

  Pour rallonger la durée de l'animation, faites glisser l'indicateur de l'image de fin. Toutes les images-clés de l'animation se déplacent en groupe pour que leurs positions relatives restent constantes. Appuyez sur Contrôle (Windows) ou Commande (Macintosh) lorsque vous faites glisser l'indicateur d'image de fin pour éviter que les autres images-clés bougent. Pour que le calque atteigne la position de l'image-clé plus tout ou plus tard, déplacez son indicateur vers la droite ou la gauche dans la barre. Pour modifier l'heure de démarrage d'une animation, sélectionnez une ou toutes les barres associées à l'animation (appuyez sur Maj pour sélectionner plusieurs barres à la fois) et faites-les glisser vers la gauche ou vers la droite. Pour déplacer tout l'emplacement d'un chemin d'animation, Sélectionnez la barre entière, puis faites glisser l'objet sur la page. Dreamweaver met à jour la position de toutes les images-clés. Toute modification avec une barre entière sélectionnée entraînera la modification de toutes les images-clés. Pour ajouter ou supprimer des images du scenario,CHOisissez Modifier > Scenario > Ajouter image ou Supprimer image. Pour une lecture automatique du scenario du l'ouverture de la page dans un navigateur, cliquez sur Lecture auto. Cette option joint un comportement a la page executant l'action Lecture du scenario lors du chargement de la page. Pour une lecture en boucle du scenario, cliquez sur Boucle. La lecture en boucle insere l'action Atteindre l'imag du scenario dans le Canal de comportement après le dernier cadre de l'animation. Vous pouvez modifier les parametes de ce comportement afin de définir le nombre de boucles.

  Modification des propriétés d'une image et d'un calque à l'aide des scénarios

  En plus du déplacement des calques à l'aide de scénarios, vous pouvez modifier le fichier source d'une image, ainsi que la visibilité, la taille, et l'ordre de superposition d'un calque.

  Pour modifier les propriétés d'une image et d'un calque à l'aide d'un scenario:

  1 Dans linspecteur de scenario, effectuez l'une des opérations suivantes : - Sélectionnez une image-clé existante dans la barre qui contrôle l'objet que vous souhaitez modifier. (Les images de début et de fin sont des images-clés). Pour creer une nouvelle image-clé, cliquez sur une image au milieu de la barre d'animation et choisissez Modifier > Scenario > Ajouter une image-clé, ou appuyez sur la touche Contrôle (Windows) ou sur la touche Commande (Macintosh) tout en cliquant sur une image dans la barre d'animation. 2 Définissez les nouvelles propriétés de l'objet enCHOIsant l'une des options suivantes: Pour changer le fjichier source d'une image, cliquez sur l'icone du dossier à cote de la boite Src dans l'inspecteur de propriétés pour parcourir et selectionner une nouvelle image. Pour modifier la visibilité d'un calque,CHOISSEs Afficher, Masquer ou Hériter dans le menu contextuel de l'inspecteur de propriétés. Voir aussi Modificat iOn de la visibilité des calques, page 225. Pour modifier la taille d'un calque, faites glisser ses poignées de redimensionnement, ou entrez de nouvelles valeurs dans les boîtes Largeur et Hauteur de l'inspecteur de propriétés. Internet Explorer 4.0 est actuellement le seul navigateur capable de modifier dynamiquement la taille d'un calque. Pour modifier l'ordre de superposition d'un calque, entrez une nouvelle valeur dans le champ Index Z, ou utilisez la palette Calque pour modifier l'ordre de superposition du calque en cours. Voir aussi Modification de l'ordre de superposition des calques, page 225. 3 Maintenez le bouton Lecture enforcé pour afficher l'animation. Le calque actuellément selectionné reste toujours visible et en haut de l'ordre de superposition. Déselectionné tous les calques afin de permettre au scenario de contrôle l'ordre de superposition ou la visibilité.

  Utilisation de scénarios multiples

  Au lieu d'essayer de contrôle toute l'action à l'aide d'un seul scenario, il est plus facile de travailler avec des scenarios séparés contrôlant des parties discrètes de la page. La page peut également inclure des éléments interactifs déclenchant des scenarios différents. Par exemple, des boutons peuvent déclencher des animations de scenario différentes.

  Pour gérer plusieurs scénarios, utilisez l'une des options suivantes :

  Pour creer un nouveau scenario,choisissez Modifier > Scenario Ajouter un scenario. Pour supprimer un scenario,CHOISSEZ Modifier > Scenario > Supprimer le scenario. Pour renommer un scenario,CHOIssez Modifier > Scenario Renommer scenario, ou entrez un nouveau nom dans le menu déroulant Scenario. Pour afficher un scenario different dans l'inspecteur de scénarios, choisissez-en un nouveau du menu déroulant Scénarios.

  Copie et collage d'annimations

  Une fois que vous avez obtenu une série d'images qui vous plaît, vous pouvez la copier et la coller dans une autre zone du scenario en cours, dans un autre scenario du document en cours, ou dans un scenario d'un autre document. Il est possible de copier et de coller plusieurs séquences à la fois.

  Pour couper ou copier et coller des séquences d'animation :

  1 Cliquez sur une barre d'animation pour selectionner une sequence. Pour en selectionner plusieurs, appuyez sur Maj en cliquant, ou sur Ctrl-A (Windows) ou Commande-A (Macintosh) pour les selectionner toutes. 2 Copiez ou coupe la selection. 3 Effectuez l'une des opérations suivantes : Deplacez la tete de lecture vers un autre emplacement du scenario en cours. - Sélectionnez un autre scenario dans le menu contextuel Scénario. - Ouvrez un autre document ou créez-en un nouveau, puis cliquez sur l'inspecteur de scenario. 4 Collez la selection dans le scenario. Les barres d'animation d'un même object ne peuvent se chevaucher parce qu'un calque ne peut se couver à deux endroits à la fois (de même qu'une image ne peut avoir deux sources différentes à la fois). Si elle se chevauchent quand même, Dreamweaver déplace automatiquement la sélection vers le premier cadre n'était pas superposé. Deux principes à garder à l'esprit lorsque l'on colle une série d'animation dans un autre document : Lorsque vous copiez une série d'animation pour un calque et que le nouveau document contient déjà un calque du même nom, Dreamweaver applique les propriétés d'animation au calque existant dans le nouveau document. Lorsque vous copiez une série d'animation pour un calque et que le nouveau document ne contient pas encore de calque du même nom, Dreamweaver collera le calque et son contenu à partir du document d'origine en même temps que la série d'animation. Pour appliquer la série d'animation collée à un autre calque dans le nouveau document,CHOISSEZ Modifier objet du menu contextual et seLECTIONnez le nom du deuxieme calque dans le menu contextual. Supprimez le calque collé si nécessaire. Voir Application d'une série d'animation à un objet différent, page 293.

  Application d'une série d'animation à un object différent

  Pour gagner du temps, vous pouvez creer une série d'animation une fois et l'appliquer aux calques restants du document.

  Pour appliquer une série d'animation existante à d'autres objets :

  1 Dans l'inspecteur de scenario, selectionnez la sequence d'animation à copier et copiez-la. 2 Cliquez sur n'importequel cadre de linspecteur de scenario et collez la sequence. 3 Cliquez du bouton droit (Windows) ou appuyez sur la touche Contrôle (Macintosh) en cliquant sur la série d'animation collée et choisissez Modifier objet dans le menu contextualuel. 4 Choisissez un autre objet dans le menu de la boîte de dialogue qui apparait, puis cliquez sur OK. 5 Repétez les étapes 2 à 4 pour tous les objets restants qui doivent suivre la même série d'animation. Vous pouvez changer d'avis sur le calque à animer après la création d'une série d'animation ; suivez simplement les étapes 3 et 4 ci-dessus (inutile de copier ou coller).

  Utilisation de comportements dans les scénarios

  Placez des comportements dans les scénarios pour qu'ils soient exécutés dans une image particulière du scenario.

  Pour placer un comportement dans un scenario :

  1 Cliquez deux fois sur une image dans le Canal des comportements dans l'inspecteur de scénarios. 2 Utilisez l'inspecteur de comportements pour définir le comportement. Le seul événement qui peut déclencher une action dans un scenario est l'animation qui atteint un certain nombre d'image, un événement onFrame7 par exemple. Le comportement peut avoir une influence sur tout objet de la page, non seulement sur ceux dans le scenario. Visualisez le scenario dans un navigateur pour voir le fonctionnement du comportement. Vous ne pouvez visualiser les comportements dans Dreamweaver.

  Actions de comportement pour contrôler les scénarios

  Associez les actions de comportement suivantes à un lien, un bouton, ou un autre objet pour contrôler les scénarios. Pour creer des effets intéressants, vous pouze placer les comportements contenant ces actions dans le canal de comportement. Par exemple, vous pouze faire en sorte qu'un scenario s'arrête de lui-même. Voir aussi Presentation des comportements, page 258. Atteindre l'image de scenario Entrainera un saut du scenario vers une certaine image. La case à cocher Boucle dans l'inspecteur de scenario ajoute l'action Atteindre l'image de scenario après la derniere image de l'animation, ce qui le fera returner à l'image 1 et redémarrer l'animation. Lire le scenario Lit un scenario à partir du premier cadre. La case à cocher Lecture auto dans l'inspecteur de scénarios executé l'action Lecture du scenario lors du chargement de la page. Arrêt du scenario Arrête le scenario.

  Changement de nom des scénarios

  Pour renommer le scenario affiché dans l'inspecteur de scénarios,CHOISEZ Modifier > Scenario Renommer, puis entrez un nouveau nom, ou entrez un nouveau nom dans le menu contextuel Nom de scenario. Si vous document contient l'action de comportement Lire le scenario (par exemple, s'il contient un bouton sur lequel l'utilisateur doit clicker pour démarrer le scenario), vous devez modifier le comportement pour reflérer le nouveau nom de scenario.

  Conseils d'animation pour les scénarios

  Les suggestions suivantes peuvent améliorer la performance de vos animations et facilitier leur création : - Affichez et masquez les calques au lieu de modifier le fisier source de plusieurs animations d'images. L'échange du fisier source d'une image peut ralentir l'animation parce que la nouvelle image doit être téléchargeée. Il n'y aura pas de pauses ou d'images manquantes si toutes les images sont téléchargeées en même temps dans les calques masqués avant l'exécution de l'animation. Prolongez les barres d'animation pour creer un mouvement plus fluide. Si l'animation parait saccadée et que les images sautent entre les positions, faites glisser la dernière image de la barre d'animation du calque pour étendre le mouvement sur plus d'images. La prolongation de la barre d'animation create plus de points de données entre le point de début et de fin du mouvement et ralentit également le déplacement de l'objet. Essayez d'accroître le nombre d'images/sec (ips) pour améliorer la vitesse, mais sachez que la plupart des navigateurs exécutés sur des systèmes moyens ne peuvent guéré aller plus vite que 15 ips. Testez l'animation sur différents systèmes avec les différents navigateurs pour trouver la meilleure configuration. - N'essayez pas d'animer des bitmaps trop volumineux. Améliorez la vitesse d'animation en évitant le déplacement d'images volumineuses. Créez plutôt des composites et déplacez des petites parties de l'image. Par exemple, montrez le déplacement d'une voiture en n'animant que les roues. - Créez des animations simples. Ne créez pas d'animations qui demandent davantage que ce que les navigateurs actuels sont capables de fournir. Les navigateurs lisent toujours toutes les images d'une animation de scenario, même si la performance du système ou de l'Internet basse.

  Ajout d'animations, d'appliquettes et d'autres éléments multimédia

  Pour insérer une appliquette Java, une animation Shockwave, Flash Player, ou toute autre commande ActiveX ou plug-in Netscape dans une page, placez le curseur à l'endroit désiré pour l'objet, puis cliquez sur le bouton approprié dans la palette d'objet. Les boutons de la palette d'objects créé le code HTML nécessaire à l'affichage des objets sur la page. Utilisez l'inspecteur de propriétés pour spécifique le fjichier source, les dimensions, et d'autres paramètres. Remarque: Il n'existe pas de norme pour l'identification des fichiers source de contrôles ActiveX qui soit unanimement acceptée. Consultez la documentation sur le contrôle ActiveX que vous utilisez, afin de savoir quels paramètres seront.

  Insertion d'animations Shockwave

  Shockwave, la(norme Macromedia pour les multimédia interactifs sur le web, est un format compressé permettant le téléchargement rapide des fischiers multimédia créé dans Macromedia Director et la prise en charge par les navigateurs les plus populaires. Le logiciel qui permet d'exécuter les animations Shockwave est disponible aussi bien sous forme de plug-in Netscape, que sous forme de contrôle ActiveX. Lorsque vous insérez une animation Shockwave, Dreamweaver utilise les deux balises OBJECT (pour le contrôle ActiveX) et EMBED (pour le plug-in) afin d'obtenir les autres résultats dans tous les navigateurs. Lorsque vous apportez des modifications à l'animation dans l'inspecteur de propriétés, Dreamweaver fait correspondre vos entrées aux paramètres appropriés pour les balises OBJECT et EMBED.

  Pour insérer une animation Shockwave :

  1 Placez le curseur la où vous pouze insérer l'animation Shockwave. 2 Cliquez sur le bouton Shockwave de la palette d'objects. 3 Dans la boîte de dialogue qui s'affiche, Sélectionnez un filchier d'animation. 4 Dans l'inspecteur de propriétés, entrez la largeur et la hauteur de l'animation dans les boîtes L et H. Ce sont les seules propriétés requises. Voir Propriétés Shockwave, page 297 pour plus de détails sur les autres propriétés.

  Propriétés Shockwave

  Pour obtenir les salariés résultats dans Internet Explorer et Netscape, Dreamweaver insère les animations Shockwave en utilisant les balises OBJECT et EMBED. (OBJECT est la balise définie par Microsoft pour les contrôleux ActiveX; EMBED est la balise définie par Netscape pour les plug-ins.) Double-cliquez sur une animation Shockwave pour afficher les propriétés dans l'inspecteur de propriétés. Voir aussi Insertion d'animations Shockwave, page 296. Ce dernier affiche les propriétés les plus souvent utilisées. Cliquez sur la flèche d'agrandissement dans le coin inférieur droit pour afficher toutes les propriétés. Nom Spécifie un nom pour identifier l'animation pour le script. Entrez un nom dans le champ sans titre, à l'extreme gauche de l'inspecteur de propriétés. L et H Spécífient la largeur et la hauteur de l'animation en pixels. Vous pouvez aussi spécifique les unités suivantes : pc (picas), pt (points), in (pouces), mm (millimétres), cm (centimétres), ou % (pourcentage de la valeur du parent). Les abréviations doivent suivre la valeur sans espace : par exemple, 3mm. Fichier Spécifique le chemin au fichier d'animation Shockwave. Entrez une valeur, ou cliquez sur le dossier à droite de la boîte, pour parcourir les fichiers. Balise Dérômenne les balises utilisées pour identifier l'animation Shockwave. Vous pouvez désirir les balises OBJECT et EMBED, ou l'une ou l'autre séparation. La valeur par défaut, OBJECT et EMBED, est recommendée. Aligner Déterminé l'alignement de l'animation sur la page. Voir Alignment des éléments, page 190 pour une description de chaque option. Couleur ar-pl Sécífie une couleur d'arrière-plan pour la zone d'animation. Cette couleur apparait également tant que l'animation ne joue pas (au cours du chargement et à la fin de l'animation). ID Définit le paramètre facultatif ID d'ActiveX. Ce paramètre est le plus souvent utilisé pour transmettre des informations entre les contrôleires ActiveX. Bordures Spécifie la largeur de la cordure de l'animation. Espace V et Espace H Spécífient le nombre de pixels d'espace blanc au-dessus, audressous et de chaque côté de l'animation. Image sec. (OBJET seulement) Spécifie une image à afficher si le navigateur de l'utilisateur ne prend pas en charge les contrôleux ActiveX. Paramétres Ouvre une boîte de dialogue dans laquelle vous pouvez entraïr des paramétres supplémentaires à transmettre à l'animation Shockwave. L'animation Shockwave doit être écrite de façon à pouvoir receivevoir ces paramétres. Voir A propos des paramétres, page 305.

  Insertion d'animations Flash Player

  La technologie Flash de Macromedia est le leader pour la diffusion de graphiques et d'animations vectorielles. Flash Player est disponible sous forme de plug-in Netscape et sous forme de contrôle ActiveX pour Internet Explorer, et il a été incorpore dans les versions les plus récentes de Netscape Navigator, Windows 98, et America Online. Lorsque vous insérez une animation Flash Player, Dreamweaver utilise les deux balises OBJECT (définie par Microsoft pour les contrôleux ActiveX) et EMBED (définie par Netscape) afin d'obtenir les mêleurs résultats dans tous les navigateurs. Lorsque vous apportez des modifications à l'animation dans l'inspecteur de propriétés, Dreamweaver fait correspondre vos entrées aux paramètres appropriés pour les balises OBJECT et EMBED.

  Pour insérer une animations Flash Player :

  1 Placez le curseur la ou vous voulez insérer l'animation. 2 Cliquez sur le bouton Flash Player dans la palette d'objects. 3 Dans la boite de dialogue qui s'affiche, selectionnez un filchier d'animation. 4 Dans l'inspecteur de propriétés, entrez la largeur et la hauteur de l'animation dans les boîtes L et H. Ce sont les seules propriétés requises. Voir Propriétés Flash Player, page 298 pour plus de détails sur les autres propriétés.

  Propriétés Flash Player

  Pour garantir les mêleurs résultats dans Internet Explorer et Netscape, Dreamweaver insère les animations Flash Player en utilisant les balises OBJECT et EMBED. (OBJECT est la balise définie par Microsoft pour les contrôleux ActiveX; EMBED est la balise définie par Netscape pour les plug-ins.) Double-cliquez sur une animation Flash Player pour afficher les propriétés suivantes dans l'inspecteur de propriétés. Voir aussi Insertion d'animation's Flash Player, page 298. Ce dernier affiche les propriétés les plus souvent utilisées. Cliquez sur la flèche d'agrandissement dans le coin inférieur droit pour afficher toutes les propriétés. Nom Spécifie un nom pour identifier l'animation pour le script. Entrez un nom dans le champ sans titre, à l'extreme gauche de l'inspecteur de propriétés. L et H Spécífient la largeur et la hauteur de l'animation en pixels. Vous pouvez aussi spécifique les unités suivantes : pc (picas), pt (points), in (pouces), mm (millimétres), cm (centimétres), ou % (pourcentage de la valeur du parent). Les abréviations doivent suivre la valeur sans espace : par exemple, 3mm. Fichier Spécifique le chemin au fichier d'animation Flash Player. Entrez une valeur, ou cliquez sur le dossier à droite de la boîte, pour parcourir les fichiers. Balise Determine les balises utilisées pour identifier l'animation. Vous pouvez désir les balises OBJECT et EMBED, ou l'une ou l'autre séparation. La valeur par défaut, OBJECT et EMBED, est recommendée. Aligner Déterminé l'alignement de l'animation sur la page. Voir Alignment des éléments, page 190 pour une description de chaque option. Couleur ar-pl Séc品牌形象 une couleur d'arrière-plan pour la zone d'animation. Cette couleur apparait également tant que l'animation ne joue pas (au cours du chargement et à la fin de l'animation). ID Définit le paramètre facultatif ID d'ActiveX. Ce paramètre est le plus souvent utilisé pour transmettre des informations entre les contrôleires ActiveX. Bordures Spécifie la largeur de la cordure de l'animation. Espace V et Espace H Spécífient le nombre de pixels d'espace blanc au-dessus, au-dessous et de chaque côté de l'animation. Image sec. (OBJET seulement) Spécife une image à afficher si le navigateur de l'utilisateur ne prend pas en charge les contrôleux ActiveX. Paramètres Ouvre une boîte de dialogue dans laquelle vous pouvez entraîr des paramètres supplémentaires à transmettre à l'animation. L'animation doit être écrite de façon à pouvoir receivevoir ces paramètres. Voir À propos des paramètres, page 305. Qualité Définit le paramètre QUALITY pour les balises OBJECT et EMBED qui exécutent l'animation. Consultez la documentation de Flash pour voir une description de ces options. Les可以选择 sont Basse, Basse auto, Haute auto, et Haute. Échelle Définit le paramètre SCALE pour les balises OBJECT et EMBED qui exécutent l'animation. Consultez la documentation de Flash pour voir une description de ces options. Lecture automatique Lit l'animation automatiquement lors du chargement de la page. Boucle Joue l'animation en boucle, indéfiniment.

  Insertion et modification d'objects Aftershock

  Aftershock est un utilise de Macromedia qui génére tout le code HTML nécessaire à l'exécution de Shockwave ou des animations Flash Player. Vous pouze ouvrir les fichiers créés par Aftershock dans Dreamweaver, puis coller le contenu dans d'autres documents de Dreamweaver. Pour éoperator les objets Aftershock, installez Aftershock dans votre système, puis lancez Aftershock à partir de l'inspecteur de propriétés.

  Pour insérer des objets Aftershock dans Dreamweaver :

  1 Dans Dreamweaver, ouvrez un fisier HTML créé par Aftershock. Les éléments Aftershock apparaisent comme des objets non modifiables dans Dreamweaver. Si un objet inclut une image d'aperçu, Dreamweaver l'affiche. 2 Copiez le contenu du fichier dans un autre document de Dreamweaver.

  Pour éditer un objet Aftershock :

  1 Double-cliquez sur un objet Aftershock pour ouvrir l'inspecteur de propriétés. 2 Cliquez sur Lancer Aftershock. 3 Éditez le fjichier dans Aftershock, enregistrez les modifications et quitterez l'utilitaire. Lorsque vous quittez Aftershock, Dreamweaver met à jour le contenu de l'objet Aftershock avec les nouvelles informations.

  Propriétés du plug-in Netscape

  Après avoir inséré un plug-in de Netscape, utilisez l'inspecteur de propriétés pour définir les paramètres. Double-cliquez sur un plug-in de Netscape pour voir les propriétés suivantes dans l'inspecteur de propriétés. Voir aussi Ajout d'animations, d'appliquettes et d'autres éléments multimédia, page 296. Ce dernier affiche les propriétés les plus souvent utilisées. Cliquez sur la flèche d'agrandissement dans le coin inférieur droit pour afficher toutes les propriétés. Plug-in Spécifie un nom pour identifier le plug-in pour le script. Entrez un nom dans le champ sans titre, à l'extreme gauche de l'inspecteur de propriétés. L et H Spécifient, en pixels, la largeur et la hauteur allouées à l'objet dans la page. Vous pouze aussi spécifique les unités suivantes: pc (picas), pt (points), in (pouces), mm (millimètres), cm (centimètres), ou % (pourcentage de la valeur du parent). Les abréviations doivent suivre la valeur sans espace: par exemple, 3mm. Src Spécifique le fjichier des données source. Entrez un nom de fjichier, ou cliquez sur l'icone de dossier etCHOISEZ un fjichier. URL du plug-in Spécificie l'URL pour l'attribut PLUGINSPAGE. Entrez l'URL (en entier) du site où les utilisateurs peuvent télécharger le plug-in. Si l'utilisateur qui consulte votre page ne possède pas le plug-in, le navigateur seraie de le télécharger à partir de cet URL. Aligner Déterminé l'alignement de l'objet sur la page. Voir Alignment des éléments, page 190 pour une description de chaque option. Sec. Spécifie le contenu de remplacement à afficher, si le navigateur de l'utilisateur ne prend pas en charge la balise EMBED. Si vous choisissez une image, elle est présente en utilisant la balise NOEMBED. Si vous tapez du texte, il est présente en utilisant l'attribut ALT de la balise EMBED. Espace V et Espace H Spécifient la quantité d'espace blanc en pixels au-dessus, audressous et de chaque côté du plug-in. Bordures Spécifie la largeur de la bordure du plug-in. Paramétres Oùvrie une boîte de dialogue dans laquelle vous entrez les paramétres supplémentaires à transmettre au plug-in de Netscape. Nombreux sont les plug-in qui répondent à des paramétres particuliers. Le plug-in Flash, par exemple, inclut des paramétres pour BGCOLOR, ALIGNN, et SCALE. Voir À propos des paramétres, page 305.

  Lecture du plug-in dans la fenêtre du document

  Vous pouvez visualiser des animations qui font appel aux plug-in—c'est-à-dire, les éléments qui utilisent la balise EMBED—directement dans la fenêtre du document. (Il est impossible de visualiser des animations qui font appel aux commandes ActiveX). Vous pouvez jour tous les éléments plug-in à la fois pour savoir comment l'utilisateur verra la page, ou vous pouvez les jourer individuellement pour vous assurer que vous avez incorpore le bon élément multimédia. Pour jouer des animations, les plug-in déquats doivent être installé sur votre machine. Dreamweaver recherche automatiquement tous les plug-in installés au démarrage, merchant d'abord dans le dossier Configuration/Plugins, puis dans les DOSiers de plugins de tous les navigateurs installés.

  Pour lire le contenu du plug-in dans la fenetre du document :

  1 Insérez un ou plusieurs éléments multimédia enCHOISIGANT Insertion > Shockwave, Insertion > Flash, ou Insertion Plug-in. 2 Effectuez un besoin parmi les options suivantes : - Sélectionnez l'un des éléments multimédia insérés etCHOISSEZ Affichage > Plug-in > Lecture. - Choisissez Affichage > Plug-in > Lire tout pour jouer tous les éléments multimédia de la page qui font appel à des plug-in.

  Pour arrêté la lecture du contentu plug-in :

  - Sélectionnez un événement multimédia et choisissez Affichage > Plug-in > Arrêt, ou choisissez Affichage > Plug-in > Arrêter tout pour arrêter la lecture de tout contenu plug-in.

  Dépannage

  Si, après avoir suivi les étapes menant à la lecture du contenu plug-in dans la fenêtre du document, une partie ne joue pas, essayez l'opération suivante : - Vérifie que le plug-in associé soit bien installé sur votre machine, et que sa version est compatible avec la version de l'animation. - Ouvrez le fjichier appelé badplugins.cfg dans un éditeur de texte et vérifie si le plug-in en question est listed. Ce fjichier surveille les plug-in qui peuvent causeur un blocage de Dreamweaver ou tout autre problème sérieux. (Si vous avez constaté des problèmes avec un plug-in particulier, il serait souhaitable de l'ajouter à ce fjichier). - Verifiez que vous avez suffisamment de mémoire (et sur le Macintosh, que suffisamment de mémoire est allouée à Dreamweaver). Certains plug-in nécessitent 2 à 5 MB de mémoire supplémentaire afin de fonctionner.

  Propriétés ActiveX

  Après l'insertion d'un objet ActiveX, utilisez l'inspecteur de propriétés pour définir d'autres paramètres. Il n'existe pas de norme pour l'identification des fichiers de données des contrôleux qui soit unanimement acceptée. Consultez la documentation sur le contrôle ActiveX que vous utilisez, afin de savoir quel paramètre désirir. Cliquez sur Paramètres dans l'inspecteur de propriétés, afin d'entrez des valeurs pour les propriétés qui n'apparaissent pas dans l'inspecteur de propriétés. Double-cliquez sur un objet ActiveX pour voir les propriétés dans l'inspecteur de propriétés. Voir aussi Ajout d'animations, d'appliquettes et d'autres éléments multimédia, page 296. Ce dernier affiche les propriétés les plus souvent utilisées. Cliquez sur la flèche d'agrandissement dans le coin inférieur droit pour afficher toutes les propriétés. ActiveX Spécifie un nom que vous entrez pour identifier l'objet ActiveX pour le script. Entrez un nom dans le champ sans titre, à l'extreme gauche de l'inspecteur de propriétés. L et H Spécífient la largeur et la hauteur en pixels de l'objet. Vous pouvez aussi désigné les unités suivantes : pc (picas), pt (points), in (pouces), mm (millimétrres), cm (centimétrres), ou % (pourcentage de la valeur du parent). Les abréviations doivent suivre la valeur sans espace : par exemple, 3mm. ID de classe Identifie le contrôle ActiveX au navigateur. Entrez la valeur vous-meme, ouCHOISEZ-en une a partir du menu contextual. Lorsque la page est chargée, le navigateur utilise l'ID de classe pour localiser le contrôle ActiveX requis par I'objet ActiveX associé à la page. Si le navigateur ne peut pas localiser le contrôle ActiveX spécifique, ilessaie de le télécharger à partir de l'emplacement spécifique dans le champ Base. Base Spécifie l'URL qui contient le contrôle ActiveX. Internet Explorer télécharge le contrôle ActiveX à partir de cet emplacement si il n'a pas été installé sur le système de l'utilisateur. Incorporer Fait que Dreamweaver ajoute une balise EMBED à l'intérieur de la balise OBJECT pour le contrôle ActiveX. Si le contrôle ActiveX dispose d'un plug-in de Netscape équivalent, la balise EMBED active le plug-in. Dreamweaver affecte les valeurs que vous avez entrées comme propriétés d'ActiveX aux plug-ins de Netscape équivalents. Src Définit le fjichier de données à utiliser en tant que plug-in de Netscape, si l'option Incorporer est activée. Si vous n'entrez pas de valeur, Dreamweaveressaie d'en déterminer une à partir des propriétés d'ActiveX entrees précédemment. Aligner Déterminé l'alignement de l'objet sur la page. Voir Alignment des éléments, page 190 pour une description de chaque option. Img sec. Spécifique une image à afficher si le navigateur ne prend pas en charge la balise OBJECT. Espace V et Espace H Spécífent la quantité d'espace vierge en pixels au-dessus, au-dessous et de chaque côté de l'objet. Données Spécifie un fisier de données que le contrôle ActiveX doit charger. De nombreux contrôle ActiveX, tels que Shockwave et RealPlayer, n'utilisent pas ce paramètre. ID Définit le paramètre facultatif ID d'ActiveX. Ce paramètre est le plus souvent utilisé pour transmettre des informations entre les contrôleires ActiveX. Bordures Spécifie la largeur de la cordure de l'objet. Paramètres Oùvrie une boîte de dialogue dans laquelle vous entrez les paramètres supplémentaires à transmettre à l'objet ActiveX. Nombreux sont les contrôleires ActiveX qui répondent à ces paramètres particuliers. Voir À propos des paramètres, page 305.

  Propriétés des l'appliquettes Java

  Après l'insertion d'une appliquette Java, utilisez l'inspecteur de propriétés pour définir les paramètres. Double-cliquez sur une appliquette Java pour afficher ses propriétés dans l'inspecteur de propriétés. Voir aussi Ajout d'animations, d'appliquettes et d'autres éléments multimédia, page 296. Ce dernier affiche les propriétés les plus souvent utilisées. Cliquez sur la flèche d'agrandissement dans le coin inférieur droit pour afficher toutes les propriétés. Appliquette Spécifie un nom pour identifier l'appliquette pour le script. Entrez un nom dans le champ sans titre, à l'extrème gauche de l'inspecteur de propriétés. L et H Spécífient la largeur et la hauteur en pixels de l'appliquette. Vous pouvez aussi spécifique les unités suivantes : pc (picas), pt (points), in (pouces), mm (millimétres), cm (centimétres), ou % (pourcentage de la valeur du parent). Les abréviations doivent suivre la valeur sans espace : par exemple, 3mm. Code Spécifique le fichier du contenu de l'appliquette. Entrez un nom de fichier, ou cliquez sur l'icone de dossier et choisissez un fichier. Base Identifie le dossier contenant l'appliquette selectionnée. Lorsque vous choisissez une appliquette, ce champ est rempli automatiquement. Aligner Déterminé l'alignement de l'objet sur la page. Voir Alignment des éléments, page 190 pour une description de chaque option. Sec. Spécife un contenu de remplacement (généralement une image), à afficher si le navigateur de l'utilisateur ne prend pas en charge les appliquettes Java, ou si Java y est désactivé. Si vous tapez du texte, Dreamweaver présente le texte en utilisant l'attribut ALT de la balise APPLET. Si vous choisissez une image, Dreamweaver insère une balise IMG entre les balises d'ouverture et de fermeture APPLET. Remarque: Pour spécifique un contenu de remplacement visible dans Netscape Navigateur (avec JavaScript désacté) comme dans Lynx (navigateur basé sur le texte), sélectionnez une image, puis ajoutez manuellement un attribut ALT à la balise IMG dans l'inspecteur HTML. Espace V et Espace H Spécífient la quantité d'espace vierge en pixels au-dessus, audressous et de chaque côté de l'appliquette. Paramètres Ouvre une boîte de dialogue dans laquelle vous pouvez entrer des paramètres supplémentaires à transmettre à l'appliquette. Nombres sont les appliquettes qui répondent à des paramètres particuliers. Voir A propos des paramètres, page 305.

  À propos des paramètres

  Utilisez la boîte de dialogue Paramètres pour entrer des valeurs de paramètres spéciaux défiinis pour les animations Shockwave, les contrôleux ActiveX, les plug-in Netscape, et les appliquettes Java. Consultez la documentation sur l'objet que vous utilisez, afin de savoir quels paramètres sont requis.

  Pour entrer une valeur de paramètre :

  1 Cliques sur le bouton ^+ (signe plus). 2 Entrez le nom du paramètre dans la colonne Paramètre. 3 Entre la valeur du paramètre dans la colonne Valeur.

  Pour supprimer des parametes :

  Sélectionnez-en un et appuyez sur Supprimer.

  Pour réorganiser les paramètres :

  Utilisez les boutons fléchés vers le haut et le bas.

  CHAPITRE 17

  Personnalisation de Dreamweaver

  Personnalisation de Dreamweaver – Vue d'ensemble

  Dreamweaver offre de nombreuses possibités de personnelisation, afin de vous permettre de travailler le pluscomfortablement et le plus efficacement possible - tout en générant un code impeccable. Voici quelques exemples de personnalisation de Dreamweaver : - Vous pouvez réarranger les objets qui se trouvent dans la palette d'objects afin d'afficher en permanence les objets plus souvent utilisés, créé de nouveaux panneaux pour une réorganisation des objets, ou pour ajouter de nouveaux objets. Voir Modifier la palette d'objects et le menu Insertion, page 308. - Vous pouvez modifier SourceFormat.profile afin d'obtenir un meilleur contrôle sur le code HTML créé par Dreamweaver. SourceFormat.profile comprend, entre autres, tous les paramètres de des préférences du format HTML. Voir Modifier le profil du formatage de la source HTML, page 310. - Vous pouvez modifier les profils existants du navigateur ou en créé de nouveaux afin de connaître le fonctionnement exact de votre page dans les différents navigateurs. Voir Créer et modifier les profils de navigateur, page 311. - Vous pouvez définir toutes vos préférences allant des palettes de couleurs et les marquages aux configurations de site et les navigateurs. Voir Paramétrage des préférences, page 72.

  Modifier la palette d'objects et le menu Insertion

  Par défaut, la palette d'objects est divisée en quatre pannaaux : Commun, Formulaires, Titre, et Invisibles (pour plus d'informations sur les objets de ces pannaux, consultez Utilisation de la palette d'objects, page 70). Les pannaux correspondant aux repertoires du dossier Configuration/objects contenu dans le dossier de l'application Dreamweaver. Pour réarranger les objets sur la palette d'objets : - Déplacez d'un dossier à un autre les fichiers HTML et GIF correspondants à un objet. Pour renomer les panneaux de la palette d'objects : - Renommez les dossiers contenus dans le dossier Configuration/Objects.

  Modifier le menu Insertion

  L'ordre des objets du menu Insertion est déterminé par le fjichier InsertMenu.htm qui se trouve dans le dossier Configuration/Objects. Ce fjichier contient une longue liste (à puce) non ordonnée de tous les objets situés à l'intérieur du dossier Configuration/Objects. Les listedes à puce imbriquées indiquent des sous-éléments de menu; les éléments de liste contenant uniquement des tirets indiquent des séparateurs. Tout objet non listede est ajouté en bas du menu Insertion au démarrage.

  Pour modifier le menu Insertion :

  1 Ouvrez le fjichier InsertMenu.htm qui se trouve dans le dossier Configuration/ Objects. 2 Pour ajouter un nouvel objet, créez un nouvel élément de liste et saississez le nom de l'objet ; la lecture, le chiffre, ou le symbole que vous souhaitez utiliser comme raccourci clavier ; et le nom de fichier de l'objet, séparés par des virgules. Par exemple : Copyright DCD, C, Copyright DCD.htm (Windows unquivalent) Sélectionnez la dette mnémonique que vous souhaitez utiliser, puis sélectionnez Texte > Style > Souligner. 3 Pour creer une ligne de separation entre les objets, creez un nouvel élément de liste, puis entrez un ou plusieurs traits d'union. 4 Pour réorganiser les objets, réarrangez-les dans la liste. 5 Pour supprimer un élément de menu sans le supprimer de la palette d'objets, supprimez son nom et son raccourci, mais laissez les virgules et le nom de fichier. Par exemple : , , Calque.htm 6 Pour supprimer un objet entierement, sortez-le du dossier Configuration/ Objects. Remarque: Redémarrez Dreamweaver pour constater les modifications apportées aux éléments du dossier Configuration/Objects.

  Creer un objet simple

  Il est inutilie d'utiliser Java Script pour les objets les plus simples ; ils ne contiennent que le code HTML qui sera à insérer dans le document. Pour obtenir des instructions sur la création d'objects plus complexes à l'aide de Java Script, consultez Extending Dreamweaver overview dans les pages d'aide de Dreamweaver.

  Pour creer un objet simple :

  1 Crééz un nouveau document vierge dans un éditeur de texte (par exemple, BBEdit ou HomeSite). Vous pouvez utiliser l'inspecteur HTML de Dreamweaver comme éditeur de texte, mais vous devrez d'abord supprimer toutes les balises de l'inspecteur HTML au démarrage d'un nouveau document. 2 Entrez ou collez les balises que cet objet va insérer dans vos documents. Par exemple, tapez : < P> ©1998 DCD Productions, Inc.
  Tous droits réservés 3 Enregistrez le fichier. Si vous voulez que le nouvel object apparaisse dans l'un des écrans existants, enregistrez-le dans l'un des dossiers Objects (Commun, Formulaires, Titre ou Invisibles). Si vous voulez créé un nouvel écran, créez un nouveau dossier à l'intérieur du dossier Objects, puis enregistrez-y votre fichier. Tout autre dossier interne aux sous-dossiers Objects est ignoré. 4 Ajouter l'objet au menu Insertion. Voir Modifier le menu Insertion, page 308. 5 A l'aide d'une application graphique ou d'edition d'image (telle que Macromedia Fireworks), creez une image Gif de 18 x 18 pixels qui servira d'icone pour votre objet dans la palette d'objects. Si vous creez une plus grande image, Dreamweaver la redimensionne automatiquement à 18 x 18 pixels. Si vous ne creez pas d'icone, Dreamweaver insere l'icone d'image manquante dans la palette d'objects. 6 Attribuez à votre icone le même nom de fichier que vous fichier object et enregistrez-la dans le même repertoire que ce dernier. Par exemple, si vous object s'appelle Copyright DCD.htm et que vous l'avez enregistré dans le réseau Commun, appeleznez votre icône Copyright DCD.gif, puis enregistrrez-la dans le même réseau. 7 Redémarrez Dreamweaver avant d'utiliser votre nouvel objet.

  Modifier le profil du formatage de la source HTML

  Le profil du formatage de la source HTML déterminé comment Dreamweaver formate le code source HTML d'un document. Le profil comprend les préférences de formatage des balises individuelles et des groupes de balises, ainsi que les préférences de format HTML (définitions à l'aide de la commande Préférences). Vous pouvez modifier SourceFormat.profile dans un éditeur de texte afin de contrôle l'écriture du HTML par Dreamweaver. Le profil est un fichier texte enregistré dans le dossier Configuration à l'intérieur du dossier d application Dreamweaver. Les préférences de format HTML définies à l'aide de la commande Préférences sont enregistrées dans SourceFormat.profile lorsque vous quitterz Dreamweaver; les modifications apportées au profil ne prennt effet qu'au redémarge de Dreamweaver. Ainsi, il est préféable de quitter le programme avant de modifier un profil pour vous assurer l'accès aux nouveaux paramétres de préférence. Le profil de formatage de la source HTML adhére à un format spécifique, qui est décrit dans le fichier. Prétez attention aux conventions suivantes : - Chaque section du profil commence par un (par exemple, , , ). - Les paramètres de chaque section sont définis dans les commentaires HTML () directement au-dessus de la section. - La ligne OMIT de la section < ?OPTIONS> est réservée à une'utilisation ultéerieure (actuellement, elle n' affecte pas le formatage de la source HTML). - Les balises individuelles peuvent être marquées de manière à ce qu'elle fassent partie de groupes de retrait (IGROUPES) dans la section . Par défaut, IGROUp 1 contient des lignes et des colonnes de tableau, et IGROUp 2 contient des yeux de cadres et des cadres. Ces regroupements correspondant aux options Retrait des lignes et des colonnes de tableau et Retrait des yeux de cadre et des cadres de la boîte de dialogue Préférences de format HTML. La mise en retrait peut être désactivée pour tout le groupe en supprimant le chiffre de l'attribut ACTIVE dans la section . Vous pouvez également ajouter d'autres balises à IGROUp 1 ou 2 pour que vous puissiez les contrôle à l'aide des options qui se trouvent dans la boîte de dialogue Préférences de format HTML. Par exemple, les paramètres par défaut de la balise P dans SourceFormat.profile sont <P BREAK= "1,0,0,1" INDENT>, ce qui produit le résultat suivant: < p> Un paragraphe de texte qui est mis en retrait par rapport à la marge de gauche, et qui a un saut avant la balise d'ouverture P et après la balise de fermeture P, mais pas après la balise d'ouverture P et pas avant la balise de fermeture P.

  Paragraphe suivant.

  Si vous changez les parametes à < P BREAK = "1,1,1,2"> , vous obtiennent : < p> Un paragraphe de texte qui n'est pas mis en retrait par rapport à la marge de gauche, et qui a un saut avant et après la balise d'ouverture P, une autre avant la balise de fermeture P, et deux autres après la balise de fermeture P. < p> Paragraphe suivant.

  Créer et modifier les profils de navigateur

  Les profils de navigateur sont les fischiers auxquels vos documents sont comparés lorsque vous effectuez une vérification du navigateur cible (voir Vérification de la compatibilité d'une page avec les navigateurs cibles, page 148). Chaque profil contient des informations sur les balises et les attributs HTML pris en charge par un navigateur particulier. Il peut également containir des averisations, des messages d'erreur, et des suggestions de substitution des balises. Les profils de navigateur sont stockés dans le dossier Configuration/ BrowserProfiles à l'intérieur du dossier d'application Dreamweaver qui se trouve sur votre disque dur. Vous pouvez(editer les profils existants, ou en créé de nouveaux avec un éditeur de texte (par exemple, BBEdit, HomeSite, Bloc-notes, ou SimpleText). Il est inutilde quitter Dreamweaver pour éditer ou créé des profils de navigateur. Les profils de navigateur suivant un format particulier. Afin d'eviter l'analyse des erreurs pendant les vérifications du navigateur cible, gardez ces règles à l'esprit lors de l'édition ou de la création des profils : La première ligne est destinée au nom du profil. Celui-ci doit être suivi d'un simple retour chariot. Ce nom apparait dans la boîte de dialogue Vérifier navigateur(s) cible(s), ainsi que dans le rapport de vérification. Il doit s'agir d'un nom unique. - La seconde ligne est destinée au code du profil PROFILE_TYPE=BROWSER_PROFILE. Dreamweaver utilise cette ligne pour déterminer quels documents sont des profils de navigateur. Elle ne doit être ni modifiée, ni déplacee. - Deux traits d'union (--) au début d'une ligne indiquent un commentaire (c'est-à-dire que la ligne sera ignorerée lors d'une verification de cible). La syntaxe pour une entrée de balise est N'utilisez jamais l'attribut attributNonSupporté2 de la balise baliseHtml !!" où balisHtmI est la balise telle qu'elle apparait dans un document HTML. nomDeLaBalise est l'appellation de la balise (par exemple, la balise s'appele "barre horizontally"). L'attribut NAME est optionnel; s'il est spécifique nomDeLaBalise est utilisé dans le message d'erreur. Si aucun nom n'est fourni, baliseHtml est utilisé. attributNonSupporté est un attribut qui n'est pas pris en charge. Les balises ou les attributs qui ne sont pas spécifique mentionnés sont considérés comme n'était pas pris en charge. Sécífiez les balises ou les attributs qui ne sont pas pris en charge seulement lorsque vous voulez créé un message d'erreur personnelisé. attributSupporté est un attribut pris en charge par baliseHtml. Seules les balises listées sans la mention !Error sont considérées comme prises en charge par le navigateur. valeurValide est une valeur prise en charge par l'attribut. - Un espace doit figurer avant la parenthèse en chevron (>) sur la ligne !ELEMENT, après les parentheses d'ouverture, avant les parentheses de fermeture, et avant et après chaque signe (|) dans la liste de valeurs. - Un point d'exclamation sans espace doit apparaitre avant les mots ELEMENT, ATTLIST, Error, msg, et htmlmsg (!ELEMENT, !ATTLIST, !Error, !msg, !htmlmsg). - Les messages!Error et !Warning peuvent apparaître dans la zone !ELEMENT ou !ATTLIST. - Les messages !msg peuvent seulement contener du texte. Les messages !htmlmsg peuvent seulement contener du code HTML valide, y compris des hyperliens. - Les commentaires HTML () ne peuvent pas etre spécifquement mentionnés dans les profils de navigateur, car ils interferent avec l'analyse. Dreamweaver ne rapporte pas les erreurs concernant les commentaires, car tous les navigateurs les prennt en charge. L'exemple suivant est une entrée correcte de la balise APPLET pour Navigator 3.0 :

  <!ELEMENT APPLET Name="Java Applet" >  
  <!ATTLIST APPLET  
  Align (top | middle | bottom | left | right | absmiddle | absbottom | baseline | texttop)  
  Alt  
  Archive  
  Class!Warning !htmlmsg="Ce navigateur ignore l'attribut <CODE>CLASS</CODE> pour la balise <CODE>APPLET</CODE>."  
  Code  
  Codebase  
  Height  
  HSpace  
  ID!Warning !htmlmsg="Ce navigateur ignore l'attribut <CODE>ID</CODE> pour la balise <CODE>APPLET</CODE>. Utilizez McClôt <CODE>NAME</CODE)."  
  Name  
  Style!Warning !htmlmsg="Ce navigateur ignore l'attribut <CODE>STYLE</CODE> pour la balise <CODE>APPLET</CODE>."  
  VSpace  
  Width 
  

  Créer un profil de navigateur

  Voussouvez create un profil de navigateur en modifient un profil existant. Par exemple, pour creer un profil pour Netscape Navigator 5.0, ouvre le profil de Navigator 4.0, ajoutez de nouvelles balises ou de nouveaux attributs introduits dans la version 5.0, et enregistrez le profil pour Netscape Navigator 5.0.

  Pour creer un profil de navigateur :

  1 À l'aide d'un éditeur de texte, ouvrez le profil qui ressemble le plus à celui que vous pouze créé, ou ouvrez celui que vous pouze modifier. 2 Changez le nom du profil. Il apparait en première ligne. Le nom doit être unique. 3 Ajoutez toutes les balises ou les attributs dont la prise en charge est assurée par le navigateur, comme l'indique la syntaxe dans Créer et modifier les profils de navigateur, page 311. Si vous ne poulez pas receivevoir de message d'erreur pour une balise particulière qui ne serait pas prise en charge, ajoutez-la à la liste des balises prises en charge. Si vous incluez des balises qui ne sont pas prises en charge dans la liste de celles qui le sont, enregistrez le profil dans un fjchier sépare sous un nouveau nom (tel que nomDuNavigateur x.x limite). Le fait de renOMmer le profil permet de conserver le fjchier original contenant seulement les balises qui sont réellement prises en charge. 4 Supprimez les balises ou les attributs qui ne sont pas pris en charge par le navigateur. Cette étape est inutil si vous creez un profil pour la prochaine version de Netscape Navigator ou de Microsoft Internet Explorer, puisqu'il est rare que les navigateurs suppliment la prise en charge de balises d'une version à une autre. 5 Ajoutez des messages d'erreur personalisés, en respectant la syntaxe indiquée dans Créer et modifier les profils de navigateur, page 311. Les profils fournis par Dreamweaver répertorient toutes les balises prises en charge ; ils peuvent inclure également des lignes de commentaire sur les balises communément utilisées, mais qui ne sont pas prises en charge. Pour ajouter un message d'erreur personalisé, supprimez les deux traits d'union au début de la ligne, et ajoutez soit le "message" !msg soit le message "!htmlmsg " après !Error. Par exemple, la notation suivante pourrait apparaître dans le profil de Netscape Navigator 3.0 :

  <!ELEMENT HR name="Barre horizontally" >  
  <!ATTLIST HR  
  -- COLOR !Error  
  >  
  Pour ajouter un message d'erreur personnalisé, supprimez les traits d'uniorajoutez votre message, precedé de !msg :  
  <!ELEMENT HR name="Barre horizontal" >  
  <!ATTLIST HR  
  COLOR !Error !msg "Internet Explorer 3.0 prend en charge COLOR dans les barreshorizontales, mais pas Netscape Navigator 3.0."  
  > 
  

  ANNEXE A

  Raccourcis clavier

  Menu Fichier

  Commande	Windows	Macintosh
  Nouveau document	Contrôle-Maj-N	Commande-N
  Nouvelle fenêtre	Contrôle-N	s/o
  Ouvrir un fjichier HTML	Contrôle-O, ou faites glisser le fjichier de la fenêtre du site ou Explorateur vers la fenêtre Document.	Commande-O
  Ouvrir dans un cadre	Contrôle-Maj-O	Maj-Commande-O
  Fermer	Contrôle-W	Commande-L
  Enregistrer	Contrôle-S	Commande-S
  Enregistrer tout	Contrôle-Maj-S	Maj-Commande-S
  Quitter	Alt-F4 ou Contrôle-Q	Commande-Q

  Menu Édition

  Commande	Windows	Macintosh
  Annuler	Contrôle-Z	Commande-Z
  Rétablit	Contrôle-Y	Commande-Y, Maj-Commande-Z
  Couper	Contrôle-X	Commande-X
  Copier	Contrôle-C	Commande-C
  Coller	Contrôle-V	Commande-V
  Effacer	Supprimer	Supprimer
  Sélectionner tout	Contrôle-A	Commande-A
  Lancer éditeur externe/BBEdit	Contrôle-E	Commande-E
  Propriétés de la page	Contrôle-J	Commande-J
  Préférences	Contrôle-U	Commande-U,Commande-K

  Éditer du texte

  Action	Sous Windows, utilisez	Sur Macintosh, utilisez
  Créer un nouveau paragraphe	Entrée	Entrée
  Insérer un saut de ligne	Maj-Entrée	Maj-Entrée
  Insérer un espace insécable	Contrôle-Maj-espace	Option-espace
  Déplacer du texte ou un objet dans la page	Faites glisser l'objet sélectionné vers le nouvel emplacement.	Faites glisser l'objet sélectionné vers le nouvel emplacement.
  Copier du texte ou un objet vers un autre emplacement de la page	Contrôle-glissez l'objet sélectionné vers le nouvel emplacement.	Option-glissez l'objet sélectionné vers le nouvel emplacement.
  Copier du texte seulement (ne copie pas les balises HTML)	Contrôle-Maj-C	Maj-Commande-C
  Maj-Commande-O	Contrôle-Maj-V	Maj-Commande-V
  Sélectionnez un mot	Double-cliquez	Double-cliquez
  Ajouter les éléments sélectionnés à la bibliothèque	Contrôle-Maj-B	Maj-Commande-B
  Basculer entre la fenêtre du document et linspecteur HTML	Contrôle-Tabulation	Commande-Tabulation ou Option-Tabulation
  Ouvrir et fermer l'inspecteur des propriétés	Contrôle-Maj-J	Maj-Commande-J
  Orthographe	Maj-F7	Maj-F7

  Formater du texte

  Commande	Windows	Macintosh
  Retrait	Contrôle-]	Commande-]
  Retrait négatif	Contrôle-[	Commande-[
  Format > Aucun	Contrôle-0 (zéro)	Commande-0 (zéro)
  Applique les paragraphs	Contrôle-T	Commande-T
  Applique les titres 1 à 6 au paragraphe	Contrôle-1-6	Commande-1-6
  Alignement > Aligner à gauche	Contrôle-Alt-L	Option-Commande-L
  Alignement > Centrer	Contrôle-Alt-C	Option-Commande-C
  Alignement > Aligner à droite	Contrôle-Alt-R	Option-Commande-R
  Mettre le texte sélectionné en gras	Contrôle-B	Commande-B
  Mettre le texte sélectionné en italique	Contrôle-I	Commande-I
  Bouton Éditer	Contrôle-Maj-E	Maj-Commande-E

  Remarque: De nombreux raccourcis de formatage ne s'appliquent pas lorsque l'on travaille dans linspecteur HTML. Rechner et remplacer du texte

  Action	Sous Windows, utilisez	Sur Macintosh, utilisez
  Rechercher	Contrôle-F	Commande-F
  Rechercher suivant	F3	F3, Commande-G
  Remplacer	Contrôle-H	Commande-H

  Travailler avec des tableaux

  Action	Sous Windows, utilisez	Sur Macintosh, utilisez
  Sélectionner une table (le curseur est positionné à l'intérieur de la table)	Contrôle-A	Commande-A
  Passer à la cellule suivante	Tab	Tab
  Revenir à la cellule précédente	Maj-Tab	Maj-Tab
  Insérer une ligne (avant la ligne en cours)	Contrôle-M	Commande-M
  Ajouter une ligne à la fin d'une table	Passer à la dernière cellule à l'aide de la touche de tabulation	Passer à la dernière cellule à l'aide de la touche de tabulation
  Supprimer la ligne en cours	Contrôle-Maj-M	Commande-Maj-M
  Insérer une colonne	Contrôle-Maj-A	Commande-Maj-A
  Supprimer une colonne	Contrôle-Maj- - (signe moins)	Commande-Maj- - (signe moins)
  Fusionner des cellules de table	Sélectionné plusieurs cellules contiguès et appuyez sur M	Sélectionné plusieurs cellules contiguès et appuyez sur M
  Fractionner des cellules de table	Contrôle-Alt-S	Commande-Option-S
  Mettre à jour la disposition de la table (actualise l'affichage en mode "édition rapide de la table")	Contrôle-Espace	Commande-Espace

  Travailler avec des cadres

  Action	Sous Windows, utilisez	Sur Macintosh, utilisez
  Sélectionner un cadre	Alt-cliquez dans le cadre	Maj-Option-cliquez dans le cadre
  Sélectionner le cadre ou le jeu de cadres suivant	Alt-flèche vers la droite	Commande-flèche vers la droite
  Sélectionner le cadre ou le jeu de cadres précédent	Alt-flèche vers la gauche	Commande-flèche vers la gauche
  Sélectionner le jeu de cadres parent	Alt-flèche vers le haut	Commande-flèche vers le haut
  Sélectionner le premier cadre ou jeu de cadres infant	Alt-flèche vers le bas	Commande-flèche vers le bas
  Ajouter un nouveau cadre à un jeu de cadres	Alt-glissez la cordure du cadre	Option-glissez la cordure du cadre
  Ajouter un nouveau cadre au jeu de cadres à l'aide de la méthode de "push"	Alt-Controlle-glissez la cordure du cadre	Option-Commande-glissez la cordure du cadre

  Travailler avec des calques

  Action	Sous Windows, utilisez	Sur Macintosh, utilisez
  Sélectionner un calque	Contrôle-Maj-Cliqueur	Maj-Commande-Cliqueur
  Sélectionner et déplacer le calque	Maj-Contrôle-glisser	Maj-Commande-glisser
  Ajouter ou supprimer un calque de la sélection	Maj-cliqueur sur le calque	Maj-cliqueur sur le calque
  Déplacer le calque sélectionné en pixels	Touches de direction	Touches de direction
  Déplacer le calque sélectionné par positions de la grille magnétique	Maj-touches de direction	Maj-touches de direction
  Redimensionner le calque sélectionné en pixels	Contrôle-touches de direction	Option-touches de direction
  Redimensionner le calque sélectionné en alignant l'increment	Contrôle-Maj-touches de direction	Option-Maj-touches de direction
  Aligner les calques sélectionnés au-dessus, en-dessous, à droite ou à gauche du dernier calque sélectionné	Contrôle-touches de direction haut/bas/gauche/droite	Commande-touches de direction haut/bas/gauche/droite
  Uniformiser la largeur des calques sélectionnés	Contrôle-Maj-[	Commande-Maj-[
  Uniformiser la hauteur des calques sélectionnés	Contrôle-Maj-]	Commande-Maj-]
  Convertir les calques en tableau	Contrôle-Maj-F6	Commande-Maj-F6
  Repositionner le contenu à l'aide des calques	Contrôle-F6	Commande-F6
  Activer ou désactiver les préférences d'imbricationpendant la création d'un calque	Contrôle-glisser	Commande-glisser
  Basculer l'affichage de la grille	Contrôle-Alt-Maj-G	Maj-Option-Commande-G
  Aligner sur la grille	Contrôle-Alt-G	Option-Commande-G
  Ajouter une image-clé (Scénario)	Maj-F9	Maj-F9
  Supprimer une image-clé(Scénario)	Supprimer	Supprimer

  Travailler avec des scénarios

  Action	Sous Windows, utilisez	Sur Macintosh, utilisez
  Ajouter un objet au scenario	Contrôle-Maj-Alt-T	Commande-Maj-Option-T

  Travailler avec des images

  Action	Sous Windows, utilisez	Sur Macintosh, utilisez
  Modifier l'sattribut de la source de l'image	Double-cliquez sur l'image	Double-cliquez sur l'image
  Modifier l'simage dans un éditeur externe	Contrôle-double-cliquez sur l'image	Commande-double-cliquez sur l'image

  Gérer les hyperliens

  Action	Sous Windows, utilisez	Sur Macintosh, utilisez
  Créer des hyperliens (texte sélectionné)	Contrôle-L	Commande-L
  Supprimer un hyperlien	Maj-Contrôle-L	Maj-Commande-L
  Faire glisser et déposer pour créé un hyperlien à partir d'un document	Sélectionnez le texte, l'image ou l'objet, puis appuyez sur Maj tout en faisant glisser la sélection vers un fichier de la fenêtre du site.	Sélectionnez le texte, l'image ou l'objet, puis appuyez sur Maj tout en faisant glisser la sélection vers un fichier de la fenêtre du site.
  Faire glisser et déposer pour créé un hyperlien à l'aide de l'inspecteur de propriétés	Sélectionnez le texte, l'image ou l'objet, puis faites glisser l'icône pointeur de fichier de l'inspecteur de propriétés vers un fichier de la fenêtre du site.	Sélectionnez leertext, l'image ou l'objet, puis faites glisser l'icône pointeur de fichier de l'inspecteur de propriétés vers un fichier de la fenêtre du site.
  Ouvrir un document lié dans Dreamweaver	Contrôle-double-cliquez sur le lien	Commande-double-cliquez sur le lien
  Vérifier les liens dans le document en cours	Contrôle-F7	Commande-F7
  Vérifier les liens sur tout le site	Contrôle-F8	Commande-F8

  Cibler et visualiser dans les navigateurs

  Action	Sous Windows, utilisez	Sur Macintosh, utilisez
  Aperçu dans le navigateur principal	F12	F12
  Aperçu dans le navigateur secondaire	Ctrl-F12	Commande-F12

  Gestion de site et FTP

  Action	Windows	Macintosh
  Créer un nouveau fisier	Contrôle-Maj-N	Maj-Commande-N
  Créer un nouveau dossier	Contrôle-Alt-Maj-N	Maj-Option-Commande-N
  Ouvrir la sélection	Contrôle-Alt-Maj-O	Maj-Option-Commande-O
  Obtenir les fichiers ou les dossiers sélectionnés à partir du site FTP	Appuyez sur Contrôle-Maj-D, ou déplacez les fichiers du panneau distant vers le panneau local dans la fenêtre du site.	Appuyez sur Maj-Commande-D, ou déplacez les fichiers du panneau distant vers le panneau local dans la fenêtre du site.
  Placer les fichiers ou les dossiers sélectionnés sur le site FTP	Appuyez sur Contrôle-Maj-U, ou déplacez les fichiers du panneau local vers le panneau distant dans la fenêtre du site.	Appuyez sur Maj-Commande-U, ou déplacez les fichiers du panneau local vers le panneau distant dans la fenêtre du site.
  Extraire	Contrôle-Alt-Maj-D	Maj-Option-Commande-D
  Archiver	Contrôle-Alt-Maj-U	Maj-Commande-Option-U
  Déconnecter	Contrôle-Alt-Maj-F5	Maj-Option-Commande-F5
  Actualiser le site local	Contrôle-F5	Commande-F5
  Actualiser le site distant	Alt-F5	Option-F5

  Carte du site

  Action	Windows	Macintosh
  Affichage des fichiers du site	F5.	F5.
  Affichage de la carte du site	Maj-F5	Maj-F5
  Créer une racine	Contrôle-Maj-R	Commande-Maj-R
  Créer un lien au fichier existant	Contrôle-Maj-K	Commande-Maj-K
  Modifier un lien	Contrôle-L	Commande-L
  Supprimer un lien	Touche Supprimer	Touche Supprimer
  Afficher/masquer un lien	Contrôle-Maj-Y	Commande-Maj-Y
  Afficher les titres de page	Contrôle-Maj-T	Commande-Maj-T
  Renommer un fichier	F2	s/o
  Agrandir la carte du site	Contrôle-+ (signe plus)	Commande-+ (signe plus)
  Réduire la carte du site	Contrôle- - (signe moins)	Commande- - (signe moins)

  Lecture des plug-ins

  Action	Sous Windows, utilisez	Sur Macintosh, utilisez
  Lecture d'un plug-in	Contrôle-P	Commande-P
  Arrêter un plug-in	Contrôle-.	Commande-.
  Lecture de tous les plug-ins	Contrôle-Maj-P	Commande-Maj-P
  Arrêter tous les plug-ins	Contrôle-Maj-.	Commande-Maj-.

  Affichage des éléments de page

  Basculer l'affichage de	Windows	Macintosh
  Éléments invisibles	Contrôle-Maj-I	Maj-Commande-I
  Règles	Contrôle-Alt-Maj-R	Maj-Option-Commande-R
  Grille	Contrôle-Alt-Maj-G	Maj-Option-Commande-G
  Affichage du contenu du titre	Contrôle-Maj-W	Commande-Maj-W

  Travailler avec des modèles

  Action	Sous Windows, utilisez	Sur Macintosh, utilisez
  Créer une nouvelle zone modifiable	Contrôle-Alt-V	Commande-Option-V
  Marquer la zone comme modifiable	Contrôle-Alt-W	Commande-Option-W

  Insérer des objets

  Pour insérer	Windows	Macintosh
  Tout objet (image, animation Shockwave, etc.)	Déplacez le fichier de la fenêtre du site ou de l'Explateur vers la fenêtre du document.	Déplacez le fichier de la fenêtre du site ou de la recherche vers la fenêtre du document.
  Image	Contrôle-Alt-I	Option-Commande-I
  Tableau	Contrôle-Alt-T	Option-Commande-T
  Animation Flash	Contrôle-Alt-F	Option-Commande-F
  Animation Director Shockwave	Contrôle-Alt-D	Option-Commande-D
  Ancre nommée	Contrôle-Alt-A	Option-Commande-A

  Ouvrir et fermer des palettes

  Basculer l'affichage	Windows	Macintosh
  Objets	Contrôle-F2	Commande-F2
  Propriétés	Contrôle-F3	Commande-F3
  Lanceur	Maj-F4	Maj-F4
  Affichage des fichiers du site	F5	F5
  Affichage de la carte du site	Maj-F5	Maj-F5
  Bibliothèque	F6	F6
  Styles	F7	F7
  Comportements	F8	F8
  Scénarios	F9	F9
  HTML	F10	F10
  Calques	F11	F11
  Cadres	Contrôle-F10	Commande-F10
  Modèles	Contrôle-F11	Commande-F11
  Afficher/masquer des fenêtres flottantes	F4.	F4.
  Fermer la fenêtre du document	Contrôle-F4 ou Contrôle-W	Commande-W ou Commande-F4

  Obtenir de l'aide

  Commande	Windows	Macintosh
  Rubriques d'aide	F1	Aide
  Dreamweaver en ligne	Contrôle-F1	Commande-F1

  A

  Accès au serveur options 128 acquisition de fichiers au départ d'un serveur distant 135 action Afficher le message d'etat 271 action Afficher-masquer les calques 279 Action Appel JavaScript 265 action Arrer ter le scenario 284 action Atteindre l'image de scenario 285 action Atteindre l'URL 275 action Contröler le son 270 action Contröler Shockwave 269 action Déplacer le calque 274 action Déplacer un calque 271 action Intervertir l'image 281 action Lire le scenario 284 action Message 278 action Modifier la propriété 265 action Ouvrir la fenetre du navigateur 276 action Precharger les images 278 action Rétabir l'intervention d'images 282 action Valider le formulaire 282 action Verifier le navigateur 266 action Verifier le plug-in 268 actions Voir aussi actions individuelles choir parmi les comportements 258 compabilité de navigateur 263 contrcler des scenarios 294 creer 260 définitions 258 modifier les comportements 260 Activerarchivage/extraction128 actualisation d'un affichage 117 Adresse HTTP option 106 affichage calques 225 cartedusite115 contenu avec balises HTML 68 contenu de l'EN-TETE 90 HTML modifiable 96 HTML verrouille 96 informations sur le document 68 insertion cote serveur 254 propriétés de l'objet 69 régions modifiables du modele 95 régions verrouillées du modele 95 sites distants 115 sites locaux 115 tracé del'image 81 Afficher le mini-lanceur option 73 Aide raccourcis 325 aide 13 alignment calques 223 elements de la page 190 tracé del'image 82 Alignment sur la commande Sélection 82 ancres 111 ancres nommées 111 annimations 257 ameliorer 295 appliquer aux objets 293 copier et coller 292 insérer 296 scenario 288 sur un chemin complexe 289 translations Flash contrôr 269 insérer 298 propriétés 298 redimensionnement 190 animateds Montrez-moi 13 animations Shockwave controller 269 insérer 296 propriétés 297 redimensionnement 190 applications utilisation avec Dreamweaver 75 Applique à la page commande 100 Appliquer formatage source commande 160 Applique le modele à la page commande 100 appliquettes insérer 296 redimensionnement 190 appliquettes Java propriétés 304 archivage et extraction de fichiers 133 annulation 133 arrière-plan image de page 87 attribut ACTION 244 attributCLASS177 attribut NAME 193 attribut USEMAP 193 attributes Dans les profils de navigateur 311 recherches 139 attributes CSS conversion en HTML 183

  B

  balise BASE 70 balise EMBED 300 balise ILayer 213 balise IMG 193 balise Layer 213 balise MAP 193 balise META 70 Balise spécifique option 158 balise TITLE 70 balises application 168 ASP 153 CFML 153 dans les profils de navigateur 311 non reconnues 153 non validates 160 recherches 139 sechevauchant153 selection 84 tableau 200 balises ASP 153 edition 162 balises CFML 153 edition 162 balises d'en-tete 168 balises de page de serveur actif 153 balises de paragraphe 168 balises en langage de marquage Cold Fusion 153 balises HTML preférences de couleurs 158 balises non validates 153 balisesXML153 Barred'etat préférences 73 BBEdit 162 bibliothèques 247 détruire le lien à un élément 251 mise à jour des pages 250 preférences 249 récréer des éléments 253 bibliothèques. Voir aussi éléments de la bibliothèque bitmaps 185 boîte de dialogue Orthographe 184 boîte de dialogue Paramètres 305 boîte de dialogue Vérificateur de lien 150 bordures cadres 238 bouton Effaceur 88 bouton Palette 88 branche 125

  C

  Cache option 106 cadres 231 bordures 238 changer le contentu 239 ciblabe de liens 110 creation 232 Dans les navigateurs non pris en charge 240 enregister des fichiers dans 233 imbriques 232 modifier la couleur d'arriere-plan 239 propriétés 235 raccourcis 319 redimentionner 237 selectionner 233 Cadres et yeux de cadres option 156 calques activation 221 alignment 223 alignment sur la grille 223 conversion en tableaux 182 conversion pour les navigateurs 3.0 229 creation 214 déplacement 223 empécher le chevauchement 228 imbrication 215 manipulation 220 mobiles 274 modification de l'ordre de superposition 225 modifier la visibilité 279 points d'ancrage 85 preférences 216 propriétés 217 propriétés pour plusieurs 219 raccourcis 319 redimensionnement 222 séléction 221 vers tableau 226 visibleité 225 vued'ensemble213 calquesCSS213 calques Netscape 213 canal de comportement 286 caracteres ASCII complexes, dans les noms de fichiers 136 cartes de site affichage 115 creation 118 enregistrement 125 liens 123 cartes du site affichage de fichiers 124 branche 125 edition de pages 121 raccourcis 323 cartes graphiques 193 cartes graphiques cote client 193 cartes graphiques cote serveur 193 case couleur 88 Casse des attributs option 157 Casse des balises option 157 cellules de tableau copie et collage 210 formatage 202 fractionnement 208 fusion 208 Centrer option 157 champs de formulaire masqué 85 champs formulaire valider 282 chemins d'acces relatifs à la racine du site prévisualisation 151 chemins relatifs 114 chemins relatifs à la racine du document 114 chemins relatifs à la racine du site 114 chemins, absolus et relatifs 114 chevauc 153 ciblage de liens 110 ciblage des navigateurs conversion du fichier en compatible 3.0 182 verification de la compatibilité 148 cibler des navigateurs personnaliser un profil 313 cibler les navigateurs profils de navigateur 311 raccourcis 321 colonnes et lignes ajout et retrait 207 formatage 202 comande Convertir calques vers tableau 226 Combiner si possible balises FONT imbriqueses option 159 commande Acquerir 135 commande Afficher régles 80 commande Ajouter un objet à la bibliothèque 248 commande Ajouter un objet au scenario 288 commande Ajouter une image 288 commande Coller comme texte 82 commande Convertir tableaux vers couches 229 commande Couleur 171 commande Définir palette de couleurs 87 commandé Éditer la liste des navigateurs 151 commande Empecher le chevauchement des calques 228 commande Enregister jeu de cadres 233 commande Enregistrer le chemin du calque 289 commande Enregister tout 233 commande Formulaire 242 commande Modifier la liste des polices 170 commande Modifier un contenu sans cadre 240 commande Nouveau à partir d'un modele... 79 commande Placer 136 commande Rinitialiser la position 81 commande Repositionner le contenu à l'aide des calques 226 commande Rétablir origine 80 commande Supprimer un scenario 292 commande Supprimerune image 288 commande Vérifer les navigateurs cibles 148 commandedesalignment172 commandedesdefilement,creer271 commands Fractionner cadre 232 commentaires insertion 165 préférences 85 Commentaires (balises HTML couleur) option 158 Common Gateway Script Interface (CGI) 244 comportements actions 258 associer 258 compabilité de navigateur 263 creer des actions 260 dans les modeles 99 définis 258 évenements 258 modifier 260 placer dans des scenarios 294 supprimer 260 tiers 262 configuration système requise Macintosh 12 Windows 12 Connector option 130 contenu ajout dans un tableau 197 repétitif 247 contenu de l'EN-TÉTE 90 contenu SANSCADRE 240 contrôles ActiveX propriétés 302 contrôles d'ActiveX redimensionnement 190 côté serveur inclus comparé aux éléments de la bibliothèque 247 couleur adaptées aux navigateurs 89 arriere-plan de cadre 239 choix 88 éléments de l'interface 72 modification du texte 171 page 87 Couleur d'arriere-plan (balises HTML couleur) option 158 Couleur du lien option 87 Couleur du texte option 87 couleur par défaut textarea 87 creation delien ancres 111 CSS1 175

  D

  de cellules. Voir cellules de tableau Définir les sites commande 128 delimiteur de formulaire 85 Detacher de commande 101 dictionnaire choix 72 edition 184 dictionary personnel 184 documents ajout de texte 82 basés sur des modèles 100 configuration 86 creation 78 désignation 86 détachment d'un modele 101 modles 78 ouverture 78 prévisualisation dans des navigateur 151 recherche 137 taill du tellechargement, temps 152 vued'ensemble77 documents HTML. Voir HTML Dreamweaver didacticiel 13 espace de travail 67 étendre 11 guide de l'utilisateur 15 installation 12 nouvelles fonctions 10 personalisation 307 utilisation avec d'autres applications 75 Dreamweaver Developers Center 15 Dynamic HTML feuilles de style 174

  E

  Echange d'extensibilité 262 editeurs externes image 192 profils de navigateur 311 texte 161 traitement des formulaires de script 241 édition de contenu dynamique 10 édition de tableau nouvelles fonctions 11 É°OÀ 17 element points d'ancrage 85 Élement de la bibliothèque creation 248 éléments affichage des raccourcis 323 alignment 190 mobile 271 éléments CSS-P 213 elements de la bibliothèque 248 ajout à la page 249 comparés à ce qui est inclus côté serveur 247 couleur de surbrillance 249 edition 250 rendre modifiable 251 renommage 250 suppression 250 éléments HEAD 70 éléments invisibles affichage et masquage 85 commentaires 165 préférences 85 scripts 164 selection 84 éléments multimédia insérer 296 paramètres 305 éléments. Voir aussi éléments d'une page individuelle Enregistrer comme modele commande 92 enregister des fichiers dans les cadres et les yeux de cadres 233 Enregistrer la requête option 142 enuscontextuels 71 évenement onBlur 282 événements déclencher des comportements 258 définis 258 disponibles pour différents navigateurs et objets 258 modifier les comportements 260 expressions régulières 143 Extraire les fichiers à l'ouverture option 128

  F

  fenetre Document 68 redimensionnement 80 selection d'elements dans 84 fenetre Message, liens 112 fenetre Site 130 fenêtres ouverture et fermetre 69 raccourcis 324 feuilles de style Voir aussi styles externes 175 modifier des feuilles de style externes 177 preférences 181 feuilles de style externes creation 175 lien à 175 modifier 177 fchiers archivage et extraction 133 insertion dans le document 253 telecharge ment 135, 136 transfert 133 fichiers cachés affichage et masquage 124 fichiers dépendants affichage et masquage 124 Fichiers distants option 116 Fichiers locaux option 116 Format Tableau commande 204 formatage HTML contrôles 155 preférences 156 formats de fichier 185 formulaire creation 242 formulaires 244 ajout d'objects 243 creation 242 JavaScript côté client 244 propriétés 243 segments 241 traitement 244 FTP Connexion et temporisation option 132 journal 135 preférences 132 Fusionner les cellules commande 208

  G

  graphiques. Voir la presentation des gras 169 grille Alignment des calques sur 223 utilisation comme guide 82 guides 79

  H

  HTML balises de formatage 168 contrôles de format source 155 conversion des attributs CSS 183 couleurs de balises 158 dans des formulaires 241 dans les insertions cote serveur 255 définition d'éditeurs externes 161 edition avec BBEdit 162 formatage de documents existants 160 modification 153 modifier le profil du format de la source 310 nettoyage 159 nonvalide160 preférences 156 préférences de format source 156 recherche de texte 139 reécriture 156 styles de balise 174 HTML Roundtrip 153

  1

  icone Pointer vers un fichier 108 Ignorer les différences entre les espaces blancs option 137 images ajout dans un tableau 197 alignment 172 cartes graphiques 193 edition externe 192 formatisprisencharge185 insérer 186 intervertir 281 modifier le fichier source à l'aide de scénarios 291 précharger 278 propriétés 188 raccourcis 320 redimensionnement visuel 190 rétablirinterverties282 images GIF 185 comme trace de l'image 81 images JPEG 185 como trace de l'image 81 imagespar seconde(lprs)286 images PNG 185 comme trace de l'image 81 images-clés 286 creer 288 imbrication calques 215 imbriquage cadres 232 Index, ? 14 insérer annimations 296 annimationsFlash298 annimations Shockwave 296 appliquettes 296 elements multimedia 296 objects Aftershock 299 insertion insertions cote serveur 253 insertion côte serveur affchage 254 edition 255 insertions côte serveur insertion 253 InsertMenu.htm 308 inspecteur 154 Inspecteur de cadres 234 Inspecteur de comportements 261 inspecteur de propriétés 69 Inspecteur de scénarios 286 Inspecteur HTML option 73 inspecteurs ouverture et fermetre 69 interactivité 257 italique 169

  J

  JavaScript 164 alertes 278 exécuter 265 jeu de cadres bordures 238 jeux de cadres ciblage de liens 110 enregister des fichiers dans 233 imbriques 232 propriétés 236 selectionner 233 jeux de cadres. Voir aussi cadres

  L

  lanceur 69 liaison documents 110 liens aux feuilles de style 175 cartede site 123 changer les cadres avec 239 chemins 114 ciblage 107 creation 110 creation avec l'icone Pointer vers un fichier 108 fenetre Message 112 mise à jour 145 modification d'un lien au niveau du site 146 ouverture d'une source 123 raccourcis 321 réparation 150 stockage dans une fichier cache 145 suppression 123 test 113 verification 149 verification dans le site 150 vers document 107 Liens actifs option 87 liens e-mail creation 112 modification 146 liens nowhere creation 112 modification 146 liens script creation 112 modification 146 liens vers des ancres 111 Liens visités option 87 Lignes et colonnes de tableau option 156, 196 lire des scénarios en boucle 290 listes creation 173 imbriquées 173 1ps 286

  M

  Marquer la seLECTION comme modifiable commande 93 marqueurs comme éléments invisibles 85 menu contextuel Actions 261 menucontextuelEvenements261 menu Insertion modifier 308 message de la barre d'etat 271 Metre à jour la page en cours commande 101 Metre à jour les pages commande 101 mini-Lanceur 68 mise à jour liens 145 mise en surbrillance d'une option 92 Modèles répertoire 92 modèles application à des documents 100 comportements 99 conversion en non modifiable 98 creation 92 détachment d'un document 101 mise à jour d'une page 101 modification 93 nouveau nom 99 preférences 94 propriétés de page 92 raccourcis 324 recherche de region modifiable 101 régions verrouillées 93 scenarios 99 styles 99 vued'ensemble91

  N

  navigateur principal 152 navigateur secondaire 152 navigateurs ciblage 148 conversion de calque 229 couleurs adaptées 89 événements reconnus par 258 fichiers 3.0 compatibles 182 prévisualisation 151 verification de la compatibilité 148 verifier la version 266 navigateurs. Voir aussi profils de navigateur Ne plus marquer la région modifiable commande 98 Nettoyer HTML commande 159 Nom du site option 106 Nouveau à partir d'un modèle commande 100 Nouvelle région modifiable commande 93 nouvelles fonctions de productivité 11

  0

  objects ajout aux formulaires 243 creer simples 309 insertion 82 insertion avec la palette d'objects 70 raccourcis 324 objects Aftershock insérer 299 option Index Z modification de l'ordre de superposition 225 option Lecture auto 286 option Lecture automatique 286 option Lecture en boute 286 option Lieste à puces 173 option Lors de l'edition de styles existants, utiliser stenographie 181 option Lors de la création de styles, utiliser sténographie pour 181 Option M'avertir lors de la correction ou de la suppression de balises 156 Option Retour à la ligne auto 157 Option Supprimer balises de fermeture superflues 156 option Taille de fenetre 80 Options Corriger lorsque possible les balises incorcorrectement imbriquées et non fermées 156 ordre de superposition calques 225 modifier à l'aide de scénarios 291 orizontales 83 orthographe choix d'un dictionnaire 72 ✓ification 184 outils graphiques 10 ouverture documents 78 fenetre 69 palettes 69

  P

  page couleur 87 image d'arriere-plan 87 ouvrir nouvelle dans le cadre ou la fenetre en cours 275 réutilisation des éléments 247 taille 152 temps de teléchargement estimé 152 titre 86 Pages d'aide HTML de Dreamweaver 13 palette Calque 220 palette d'objects 70 ajouterdesobjetsa309 Palette de bibliothèque 253 Palette de modèles 99 palette de styles 181 Palette Obj personnalisation 308 palettes ouverture et fermeture 69 Palettes flottantes préférences palettes flottantes 72 Paramètres de la police option 73 pare-feu connexion 106 paramétrage d'un hôte et d'un port 132 photographies 185 placement de fichiers sur un serveur distant 136 plug-in dépannage 302 lire 301 verifier 268 plug-in Netscape 300 propriétés 300 plug-ins lecture raccourcis 323 redimensionnement 190 points d'ancrage 85 pour éléments flottants 85 polices encodage 73 modification des caractéristiques 169 modification des combinaisons 170 paramétrage par défaut 73 Polices / Encodages préférences 73 préférence d'affichage pour la mise en surbrillance d'un élément de bibliothèque 85 préférence de format source 156 préférences 72 Aperçu dans le navigateur 152 bibliothèque 249 calque 216 couleurs de surbrillance 74 couleurs des balises HTML 158 éléments invisibles 85 feuilles de style 181 format source HTML 156 modèle 94 palettes flottantes 74 polices 73 réécriture HTML 156 Site FTP 132 préférences de réécriture HTML 156 preférences de traduction 254 preférences du site FTP 132 préférences générales 72 préférences pour Aperçu dans le navigateur 152 préférences pour la barre d'étéat 73 prévisualisation dans des navigateurs 151 profil du format source 310 profils de navigateur creer 313 modifier 311 propriété de la bibliothèque Rendre modifiable 251 propriétés affchage 69 translations Flash 298 annimations Shockwave 297 appliquette Java 304 cadre 235 calques multiples 219 contrôles ActiveX 302 image 188 jeudecadres236 lene et cellule 202 modification de valeurs 265 tableau 201 propriétés de code non valides 160 propriétés de l'objet de la bibliothèque 253 propriétés des calques 217 puzzles 271

  R

  raccourcis 315 raccourcis clavier 315 recherche 137 balises et attributes HTML 139 chaines de texte 139 expressions régulières 143 modeles 141 raccourcis 318 textedansdansunefenetreDocument139 textedansune sourceHTML139 texte entoure de balises spécifiques 141 recherche et remplacement. Voir recherche Rechercher options 137 Rechercher, ? 14 recherches de texte chains 139 expressions régulières 143 HTML 139 redéfinir la balise HTML 177 redimensionnement calques 222 cellules de tableau 206 elements de la page 190 redimensionner cadres 237 Regarder dans option 101 égion modifiable couleur 92 recherche 101 égion verrouillée 92 règles 80 rétablissement de l'origine 80 Remplacer la casse option 157 Remplissage de cellule option 196 répertoire racine local 106 répartoires recherche 137 répetition des éléments 247 Retrait option 156

  s

  Saults deligne option 157 saults deligne 85 scenarios chemins complexes 289 conseils d'animation 295 contrôler avec des actions 294 creer 288 dans les modèles 99 déplacer la tête de lecture 285 images-clé 288 lire automatiquement 290 lire en boucle 290 modifier 290 modifier le fichier source de l'image 291 modifier les options de calque 291 multiples 292 placer des comportements dans 294 raccourcis 320 restants 294 tete de lecture 286 scénarisation 115 script traitement du formulaire 244 scripts 85 entree et edition 164 propriétés 164 scripts CGI 244 selecteurCSS177 selecteur de balise 68 selection code HTML 84 éléments 84 objects 84 séléction calques 221 selectionner cadres et yeux de cadres 233 Show Log on Completion, option 159 site local Voir aussi sites carte 118 creation 106 sites affichage 115 ajout 117 cache 145 changement del'affichage 116 creation 106 definlion 128 edition au niveau du site 10 instructions 147 options de maintenance 130 raccourcis 322 recherche de fichiers 137 sLECTION de fichiers mis à jour 117 structure et navigation 127 test 147 verification des liens 150 son,contrôr 270 souligné 169 SourceFormat.profile 155 sous-menu Object du formulaire 243 sous-menu Style 169 specification des feuilles de style en cascade 175 structure de repertoires, site 127 styles 174 Voir aussi feuilles de style application de styles personnalisés 179 conversion en HTML 182 creation 177 dans les modèles 99 définition des propriétés 175 incompatible 180 modifier 180 Tableau de conversion de CSS en indicateur HTML 183 styles imbriques 85 styles personalisés. Voir feuilles de style Supprimer balise(s) spécifique(s) option 159 Supprimer les balises imbriquées redondantes option 159 Supprimer les balises vides option 159 Supprimer les commentaires HTML de Dreamweaver option 159 Supprimer les commentaires HTML non-Dreamweaver option 159 survols creation 187 test 187

  T

  Table des matieres, Aide 14 tableaux ajout d'images 197 ajout de contenu 197 ajout et retrait de lignes et de colonnes 207 alignment 172 balises 200 calque secondaire 226 conversion des calques 182 creation 195, 196 creation de 195 effacement de la largeur et de la hauteur de cellule 207 formatage 200 formatages des éléments 202 imbrication 197 lignes et cellules 202 mise en forme predefinie 204 modification des largeurs de colonne 206 propriétés 201 redimensionnement 206 réglage de la taille des cellules 208 réglage de laaille des lignes et des colonnes 206 selection d'elements 198 tri 205 tableaux. voir aussi colonnes et cellules, cellules de tableau raccourcis 318 Taille de la fenetre option 73 Taille de tabulation option 157 Taille du retrait option 157 telechargement taille, estimations de temps 152 telechargement de fichiers 136 telecharger comportements 262 Tenir compte de la casse option 137 tete de lecture 286 textarea ajout au documents 82 alignment 172 couleur par défaut 87 editor des raccourcis 316 formatage 167 formatage raccourcis 317 modification de la couleur 171 modification des combinaisons de polices 170 retrait 172 Texte (balises HTML couleur) option 158 texte en retrait 172 Toujours imbriquer un calque cree dans un autre calque 216 trace del image 81 repositionnement 81 traitement des formulaires 244 transfert de fichiers dépannage 136

  U

  URL ouvrir une nouvelle fenetre 276 URL relatives à la racine 106 URL. Voir chemins, relatifs et absolu Utiliser le pare-feu option 128 Utiliser les expressions régulières option 137

  V

  Valeur par défaut option 158 VBScript 164 visualiser dans les navigateurs raccourcis 321 Vitesse de connexion option 73

  X

  XML balises 153